Question

我的图像如下

 <img alt="" style="cursor: pointer" src="images/plus.png" width="20" height="20" />

我正在使用下面的代码

来改变这个img src

1. $("[src*=plus]").click( function () {
                    $(this).attr("src", "images/minus.png");
                });
2.  $("[src*=minus]").click(function () {
                $(this).attr("src", "images/plus.png");
            });

第一个功能按预期工作 - 当我第一次点击按钮时图像变为'减'，但是当我点击这个改变的'减'图像时，函数调用再次变为相同第一个功能。我在这做错了什么。请帮忙。

请参阅以下链接Changing the image source using jQuery

Answer 1

您可以尝试使用on()代替click()或使用其他属性class来检查图像的当前状态，只需单击一下即可轻松执行事件。

$("[src*=plus]").on("click",function () {
                    $(this).attr("src", "images/minus.png");
                });
$("[src*=minus]").on("click",function () {
                    $(this).attr("src", "images/plus.png");
                });

或者你可以使用以下作为的 HTML：

<img alt="" style="cursor: pointer" src="images/plus.png" width="20" height="20" onclick="javascript:return img_click(this);"/>

JavaScript：

function img_click(el) { if($(el).attr("src").toLowerCase().indexOf('plus') != -1) { $(el).attr("src", "images/plus.png"); } else { $(el).attr("src", "images/minus.png"); } }

Answer 2

你没有错，只需要使用on功能，因为你在结果src之后更改DOM无法找到新的src，所以你需要使用实时点击功能：

$(document).on('click','[src*=plus]',function(){
  $(this).attr("src", "images/minus.png");
});
$(document).on('click','[src*=minus]',function(){
  $(this).attr("src", "images/plus.png");
});

$(document).on('click','[src*=plus]',function(){
  $(this).prop("src","images/minus.png");
  console.log('changed to minus');
});

$(document).on('click','[src*=minus]',function(){
  $(this).prop("src","images/plus.png");
  console.log('changed to plus');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img alt="some text" style="cursor: pointer" src="images/plus.png" width="20" height="20" />

Answer 3

您需要使用

$(document).on('click', '[src*=plus]', function(event) {
    $(event.target).attr("src", "https://png.icons8.com/color/100/minus");
});
$(document).on('click', '[src*=minus]', function() {
    $(event.target).attr("src", "https://png.icons8.com/color/100/plus");
});

当附加事件处理程序时，最初不存在带有src*=minus的img，因此我们需要使用$(document).on('click', 'selector', handler)，从而在文档上附加处理程序。

工作小提琴： https://jsfiddle.net/wrfscfw1/1/

Jquery点击功能与图像src

3 个答案: