Question

我对jQuery有些麻烦。我有一组带有.square类的Div。其中只有一个应该有.active类。可以在点击时激活/取消激活此.active类。

这是我的代码：

    jQuery().ready(function() {
 $(".square").not(".active").click(function() {
  //initialize
  $('.square').removeClass('active');

  //activation
  $(this).addClass('active');

  // some action here...
 });

 $('.square.active').click(function() {
  $(this).removeClass('active');
 });
    });

我的问题是第一个函数si被调用，即使我点击一个活动的.square，就好像选择器不工作一样。实际上，这似乎是由于addClass（'active'）行......

你知道如何解决这个问题吗？感谢

Answer 1

这是因为函数绑定到创建它们时没有active类的元素。您应该绑定到所有.square元素，并根据元素是否具有类active采取不同的操作：

$(document).ready(function(){
    $('.square').click(function(){
        var clicked = $(this);
        if (clicked.hasClass('active')) {
            clicked.removeClass('active');
        } else {
            $('.square').removeClass('active');
            clicked.addClass('active');
        }
    });
});

Answer 2

只是为了给出与其他答案不同的东西。 Lonesomeday说这个函数一开始就绑定了它们。这不会改变。

以下代码使用jQuery的live方法来保持最佳状态。 Live将始终处理选择器引用的任何内容，因此如果您更改了类，它将不断更新。您还可以使用square类动态添加新div，它们也会自动拥有处理程序。

$(".square:not(.active)").live('click', function() {
    $('.square').removeClass('active');
    $(this).addClass('active');
});

$('.square.active').live('click', function() {
    $(this).removeClass('active');
});

工作示例：http://jsfiddle.net/jonathon/mxY3Y/

注意：我并不是说我会这样做（完全取决于你的要求），但这只是看待事物的另一种方式。

使用.not（）进行jquery选择

2 个答案: