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

所以我希望会发生的是你会点击你好，它会说显示。然后下次它会说流行。然后它将在两者之间交替。然而，它被困在节目中。

我猜想我需要如何重新绑定事件。

有人可以帮我弄这个吗？

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

或尝试使用切换（）；

$('.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