Question

我正在尝试使用jquery交换点击图像。我已经让它与点击绑定到图像类一起工作。但是，如果我尝试包装函数并将事件绑定到按钮或锚点，它将不会交换图像。这是jquery：

<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$(".test_toggle").click(function(){
    $(this).find(".img-swap").live('click', function() {
        if ($(this).attr("class") == "img-swap") {
          this.src = this.src.replace("_off","_on");
        } else {
          this.src = this.src.replace("_on","_off");
        }
        $(this).toggleClass("on");
    });
});
});
</script>

这有效：

jQuery(document).ready(function( $ ) {
  $(".img-swap").live('click', function() {
  if ($(this).attr("class") == "img-swap") {
    this.src = this.src.replace("_off","_on");
  } else {
    this.src = this.src.replace("_on","_off");
  }
  $(this).toggleClass("on");
  });
});

非常感谢任何帮助。

Answer 1

我认为没有必要委托事件监听器，所以我已经删除了它们。只需将click事件添加到图像中，然后您可以在单击.test-toggle时手动“触发”对其的单击。 E.G：

$(function() {
  
    //add on click event
    $(".img-swap").on('click', function() {
        if (this.src.indexOf("_off")>0) {
            this.src = this.src.replace("_off","_on");
        } else {
            this.src = this.src.replace("_on","_off");
        }
    });
  
    //add remote trigger
    $(".test_toggle").on('click', function(){
        $(".img-swap").trigger("click");
    });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img-swap" src="https://placehold.it/300?text=_off" />
<button class="test_toggle">test toggle</button>

Answer 2

多数民众赞成，因为与img不同。

a或button没有src属性。

因此，当您将事件绑定到按钮或锚点时，第二个代码实例中的this.src将无效。

Answer 3

我会删除这一行：

 $(this).find(".img-swap").live('click', function() {

它的目的是什么？您可以在第一次点击后立即交换此图像，对吗？另外，请确保.img-swap位于包含类test_toggle的标记内。您正在使用：

$(this).find(".img-swap")

find()仅搜索所选元素的子项。

如果不是嵌套使用

$(".img-swap")

而不是：

 $(this).find(".img-swap")

Answer 4

我重写了js，但未经过测试。我可以嵌套点击吗？

$(".test_toggle").click(function(){
    $.find(".img-swap").click(function(){
        if ($(this).attr("class") == "img-swap") {
        this.src = this.src.replace("_off","_on");
        } else {
        this.src = this.src.replace("_on","_off");
        }
        $(this).toggleClass("on");
    });
});

元素上的jquery交换图像点击不起作用

4 个答案: