4

要素の 1 回のクリックでイベントを発生させ、同じ要素の 2 回目のクリックで別のイベントを発生させたいと考えています。以下にデモリンクを添付しました。問題は、2 回目のクリックを待たずに 1 回のクリックで最後のイベントまで実行されるように、イベントが連鎖していることです。これが重複している場合は申し訳ありませんが、この掲示板で同じ問題を見つけることができません。

私はおそらく質問の言葉遣いがうまくできていないので、きっとトラブルに巻き込まれることになると思います...

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

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

4

4 に答える 4

7

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

    });

});
于 2013-01-29T07:24:43.507 に答える
3

この場合、最高のパフォーマンスを得るために委任を使用します。

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

もちろん、構文ははるかに優れている可能性があります。私はあなたに似たものを使って、より良い写真を提供します。

于 2013-01-29T07:25:45.877 に答える
0

試してください：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>
于 2013-01-29T08:05:37.903 に答える
0

よりダイナミックなものが必要な場合は、これを試してください。カウントを保存することで、必要な数の色を追加でき、問題なく機能します。

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

于 2013-01-29T07:46:28.307 に答える