带有图像src的jQuery点击功能答案

【问题标题】：Jquery click function with image src带有图像src的jQuery点击功能
【发布时间】：2017-12-09 10:53:16
【问题描述】：

我有一张如下图

 <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

【问题讨论】：

标签： c# jquery html

【解决方案1】：

你没有看错，只需要使用on功能，因为你在DOM之后更改src导致找不到新的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" />

【讨论】：

【解决方案2】：

您可以尝试使用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");
 }

}

【讨论】：

没有错误，它总是转到第一个函数。即使我点击减号按钮。
所以你可以使用添加的代码和函数来代替下面的代码。
效果很好。谢谢，但我真的很想知道代码有什么问题！
根据您的代码，有时动态事件由于您的代码而未绑定到 elem。
@Sribin 为什么不尝试下一个答案？它已经解决了你的问题。

【解决方案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/

【讨论】：