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

Question

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

我可能没有很好地措辞这个问题，而且我确信我会为此陷入困境......

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

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

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');
        }

    });

});

Answer 2

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

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

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

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

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>