如何在 JQuery 中的同一元素上链接多个单击事件？答案

【问题标题】：How to chain multiple click events on same element in JQuery?如何在 JQuery 中的同一元素上链接多个单击事件？
【发布时间】：2013-01-29 07:17:00
【问题描述】：

我希望在单击一个元素时触发一个事件，然后在第二次单击同一元素时触发一个不同的事件。我在下面附上了一个演示链接。问题是事件被链接起来，因此一次单击会运行到最后一个事件，而无需等待第二次单击。如果这是重复的，我很抱歉，但我在此板上找不到相同的问题。

我可能没有很好地表达这个问题，而且我肯定我会因此而陷入困境......

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

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

【问题讨论】：

您希望点击事件切换还是只希望每个事件运行一次？
我认为您需要一个具有不同条件的事件处理程序：在示例中，条件是： if($(this).hasClass('...')) {...} 等等开。

标签： jquery chaining

【解决方案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');
        }

    });

});

【讨论】：

谢谢！这正是我想要的。非常感谢。

【解决方案2】：

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

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

当然，语法可能会好得多。我使用与您的相似来为您提供更好的图片。

【讨论】：

谢谢 Eru。我也会试试这个方法。我的语法只是一个简单的例子来展示我想要什么，而不是我将在我的网站上使用的实际语法。

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

【讨论】：

我正要建议添加和删除 .box 的子元素的类，这样您就不必担心删除类（例如 jsfiddle.net/lollero/MEFNG/5 ）。好吧，你所做的也很有效。你得到了我的选票。 您的 jsbin 链接不是最新的。
并不是要用 cmets 淹没您的答案，但我认为如果我们想要动态化......我们应该更深入！ jsfiddle.net/lollero/MEFNG/7
是的 data 对任何东西都很好，但我会用颜色表示语义，但可能不会用其他类型的东西......不知道
我的座右铭是'语义...... schmemantic......'。 ||还记得我说过关于洪水的事吗？忘记改代码中的1个数字，所以：jsfiddle.net/lollero/MEFNG/8

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

【讨论】：

我喜欢使用数组。我最初给出的示例是 3 个彩色框，但我将使用代码循环 5 个精灵。数组更有意义。