Question

我尝试使用这个简单的2次降落在同一次潜水中改变课程两次：

  $('.q_one').click(function(){
  $(this).removeClass('q_one').addClass('q_two');

  });



$('.q_two').click(function(){
      $(this).removeClass('q_two').addClass('q_three');

      });

所以我希望这个方法有效，当我点击.q_one时，该类将更改为q_two，并且一旦它点击后它有一个这个类它会将它改为q_three。

不幸的是，它仅适用于第一个例子。

我该怎么办？

Answer 1

这是因为绑定处理程序时q_two不存在。

我将您的类放在一个数组中，并通过维护索引来循环它们。我假设最后你要回到第一个。

var classes = ['q_one','q_two','q_three'],
    i = 0;

$('.q_one').click(function(){
    $(this).removeClass(classes[ i ])
           .addClass(classes[ i = ++i % classes.length ]);
});

演示： http://jsfiddle.net/JH9Ve/

Answer 2

您必须将'点击'切换为'live'或'on

问题是click事件没有绑定到具有新类'q-two'的元素

$(document).on('click', '.q_two', function(){
    $(this).removeClass('q_two').addClass('q_three');
});

Answer 3

如果您希望能够处理将来添加的元素的点击，则需要将侦听器添加到父元素。

$(document).on('click', '.q_two', function(){
    $(this).removeClass('q_two').addClass('q_three');
});

Answer 4

当您更改元素的类时，如果您使用click()，则之前的绑定将不再适用。

使用on（在jQuery 1.7+上）或live（之前）。

$(document).on('click', '.q_one', function(){
    $(this).removeClass('q_one').addClass('q_two');
});

$(document).on('click', '.q_two', function(){
    $(this).removeClass('q_two').addClass('q_three');
});

住：

$('.q_one').live('click', function(){
    $(this).removeClass('q_one').addClass('q_two');
});

$('.q_two').live('click', function(){
    $(this).removeClass('q_two').addClass('q_three');
});

演示：http://jsfiddle.net/XYKbL/4/

<强>更新：我使用此处的technique I described和bounding to the click方法（来自this answer）进行了比较。

用jQuery更改类

4 个答案: