jquery - クラスの変更に基づいてアイテムのイベントを変更するjquery方法

Question

私はこのコードを持っています:

<div class="show">Hello</div>

スクリプトを使用:

$('.show').click(function() {
    $(this).removeClass('show');
    $(this).addClass('pop');
   alert("show");
});
$('.pop').click(function() {
    $(this).removeClass('pop');
    $(this).addClass('show');
   alert("pop");
});

私が期待していたのは、Hello をクリックすると show と表示されることです。それから次はポップと言うでしょう。その後、2 つを交互に使用します。しかし、それはショーで立ち往生しています。

イベントを再バインドする必要があると思います。

誰かがこれで私を助けることができますか?

http://jsfiddle.net/Kgak9/

Answer 1

on代わりに使用してください。

$('body').on('click', '.show', function() {
    $(this).removeClass('show');
    $(this).addClass('pop');
   alert("show"); 
});
$('body').on('click', '.pop', function() {
    $(this).removeClass('pop');
    $(this).addClass('show');
   alert("pop");
});

デモ

Answer 2

または toggle(); を使用してみてください。

$('.show').toggle(function() {
      $(this).removeClass('show');
      $(this).addClass('pop');
      alert("show"); 
   },
   function() {
       $(this).removeClass('pop');
       $(this).addClass('show');
       alert("opo");
   });

Answer 3

dataより短いコードを生成するクラスを使用する代わりに、要素にフラグを設定できます。

$('button').click(function(){
  var flag = $(this).data('flag') || false;
  alert(flag ? 'foo' : 'bar');
  $(this).data('flag', !flag);
});

デモ: http://jsbin.com/epilew/2/edit

編集：

これを拡張して、配列から取得したい任意の数の単語を使用できます。

$('button').click(function(){
  var words = ['foo', 'bar', 'hey', 'lol'];
  var flag = $(this).data('flag') || 0;
  var word = words[flag];
  alert(word);
  $(this).data('flag', flag >= words.length-1 ? 0 : ++flag);
});

デモ: http://jsbin.com/epilew/4/edit