如何在JQuery中为同一元素链接多个点击事件？

Question

我想在一个元素上的单击事件后触发一个事件，然后在同一元素的第二次单击事件上触发另一个事件。我在下面附加了一个演示链接。问题是这些事件被链接在一起，所以一个单击事件会运行到最后一个事件而不等待第二个单击事件。很抱歉如果这是一个重复问题，但我在这个板块上找不到相同的问题。

我可能没有很好地表达问题，我确定我会因此惹麻烦...

$(function(){
l $('.box')
      .click(function() {
        $(this).removeClass('red'
                        ).addClass('black');
      })
      .click(function() {
        $(this).removeClass('black'
                        ).addClass('blue');
      });
});`

http://jsfiddle.net/MEFNG/1/

- user1199178

---

你想让点击事件切换还是只想让它们每个运行一次？ - Explosion Pills

我认为你需要一个带有不同条件的事件处理程序：在这个例子中，条件将是：if($(this).hasClass('...')) {...}等等。 - axel.michel

Answer 1

http://jsfiddle.net/lollero/MEFNG/3/

html:

<div class="box red"></div>

CSS：

div.box {
  width: 100px;
  height: 100px;
}
.red {background:red}
.black {background:black}
.blue {background:blue}

jQuery:

$(function(){

    $('.box').on("click", function() {

        var box = $(this);

        if ( box.hasClass('red') ) {
            box.removeClass('red').addClass('black');
        }
        else if ( box.hasClass('black') ) {
            box.removeClass('black').addClass('blue');
        }
        else if ( box.hasClass('blue') ) {
            box.removeClass('blue').addClass('red');
        }

    });

});

- Joonas

Answer 2

在这种情况下，使用委托以获得最佳性能：

$('.box').parent()
.on('click', '.red', function() {
  $(this).removeClass('red').addClass('black');
})
.on('click', '.black', function() {
  $(this).removeClass('black').addClass('blue');
});

当然，语法可以更好。我使用类似于您的语法来为您提供更好的理解。

- Eru

---

谢谢Eru。我也会尝试这种方法。我的语法只是一个快速的示例，展示了我想要的内容，而不是我将在网站上使用的实际语法。 - user1199178

Answer 3

尝试一下这个，如果你想要更动态的东西。通过存储计数器，您可以添加任意数量的颜色，并且它将正常工作：

var classes = ['red','green','yellow','blue'];
$('.box').click(function() {
  var $this = $(this),
      count = $this.data('count') || 0;
  $this.data('count', count >= classes.length-1 ? 0 : count+1);
  $this.removeClass(classes.join(' ')).addClass(classes[count]);
});

演示：http://jsbin.com/adoqan/1/edit

- elclanrs

---

我本来想建议也许可以添加和删除 .box 的子元素的类，这样你就不必担心删除类了（例如 http://jsfiddle.net/lollero/MEFNG/5/）。好吧，你所做的也可以。你得到了我的支持。**你的 jsbin 链接已经过期了。** - Joonas

不是想在你的答案中洪水猛兽般地留言，但我觉得如果我们想要变得更加动态……我们应该更深入一些！http://jsfiddle.net/lollero/MEFNG/7/ - Joonas

是的，data 对于任何东西都很好，但是对于颜色可能是语义化的，但对于其他类型的东西可能不是...不知道。 - elclanrs

我的座右铭是“语义...什么的...”。|| 还记得我说过洪水的事吗？忘记在代码中更改一个数字，所以：http://jsfiddle.net/lollero/MEFNG/8/ - Joonas

Answer 4

尝试一下：http://jsfiddle.net/yBdBp/。

var classes = ['red','blue','black'];
$('.box div').click(function () {
  $(this).each(function(){
  this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
 });
});

使用 HTML：

<div class="box">
   <div class="red"></div>
</div>

- Anujith

---

我喜欢使用数组。我最初给出的示例是针对3个有颜色的盒子，但我将使用该代码来循环遍历5个精灵。使用数组更合理。 - user1199178