替换img并在单击时保持指向更改功能的链接

debugcn 发表于 Dev

约翰·皮特森

我想在图片上单击以做两件事：（i）替换该图片的src属性；（ii）保留指向执行（i）的功能的链接。我的以下代码仅适用于图片的第一次点击，而不再适用于该图片：

javascript：

$(function(){

    $('.link_check_allowed').click(function(){
        $('#check_allowed').removeClass("link_check_allowed");
        $('#check_allowed').prop("class", "link_check_not_allowed");
        $('#check_allowed_image').prop("src", "http://www.clker.com/cliparts/4/4/1/a/1195429270821624493molumen_multicolor_power_buttons_4.svg.med.png");
    });

    $('.link_check_not_allowed').click(function(){
        $('#check_allowed').removeClass("link_check_not_allowed");
        $('#check_allowed').prop("class", "link_check_allowed");
        $('#check_allowed_image').prop("src", "http://www.clker.com/cliparts/8/8/2/2/1195423990759977006molumen_multicolor_power_buttons_5.svg.med.png");
    });

 });

的HTML：

<a style='border:0; cursor:pointer'>
    <div id='check_allowed' class='link_check_allowed'>
       <img src="http://www.clker.com/cliparts/8/8/2/2/1195423990759977006molumen_multicolor_power_buttons_5.svg.med.png" width="50" height="50" border="0" id="check_allowed_image"/>
     </div>
</a>

我尝试过这里描述的建议：单击时用jquery替换img src，但没有帮助。

小提琴

大卫说恢复莫妮卡

您遇到的问题是，事件绑定在页面上没有元素类别为的情况下.link_check_not_allowed。鉴于此，我建议将您的jQuery更改为以下内容：

$('.link_check_allowed').on('click', function(){
    $('#check_allowed').toggleClass('link_check_allowed link_check_not_allowed');
    $('#check_allowed_image').prop('src', function(i,src){
        return src == 'http://www.clker.com/cliparts/4/4/1/a/1195429270821624493molumen_multicolor_power_buttons_4.svg.med.png' ? 'http://www.clker.com/cliparts/8/8/2/2/1195423990759977006molumen_multicolor_power_buttons_5.svg.med.png' : 'http://www.clker.com/cliparts/4/4/1/a/1195429270821624493molumen_multicolor_power_buttons_4.svg.med.png';
    });
});

JS小提琴演示。

参考：

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。