Question

我想点击图片做两件事：（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>

我已经尝试过这里描述的建议：replace img src with jquery on click但它没有帮助。

FIDDLE

Answer 1

你可以在图像的src上使用.toggle（）。

http://api.jquery.com/toggle/#toggle-options

Answer 2

你应该使用＆＃34; Live＆＃34;事件如

  $("#check_allowed").on("click",function(){
   if($(this).hasClass("link_check_allowed"))
   {
    $('#check_allowed').removeClass("link_check_allowed").addClass("link_check_not_allowed").prop("src", "http://www.clker.com/cliparts/4/4/1/a/1195429270821624493molumen_multicolor_power_buttons_4.svg.med.png");
   }
  if($(this).hasClass("link_check_not_allowed"))
   {
    $('#check_allowed').removeClass("link_check_not_allowed").addClass("link_check_allowed")prop("src", "http://www.clker.com/cliparts/8/8/2/2/1195423990759977006molumen_multicolor_power_buttons_5.svg.med.png");
   }
 });

它会起作用。

Answer 3

您遇到的问题是，如果页面上没有.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 Fiddle demo

参考文献：

替换img并在点击时保持链接到更改功能

3 个答案: