Question

我有两个列表项，当点击时，应该将类从'.off'更改为'.on'。一次只有一个元素应该是'.on'，所以当一个元素已经打开而另一个元素被点击时，两个元素都应该将类从'.off'改为'.on'，反之亦然。如果单击类别为“.on”的列表项，则应将类更改为“.off”

我遇到的问题是当点击类“.on”的列表项时，它仍会运行click函数，就好像它有一个'.off'类

我的HTML：

<ul>
    <li><a href="about" class="off">ABOUT</a></li>
    <li><a href="upload" class="off">SUBMIT</a></li>
</ul>

我的javascript（在jQuery 1.7.1上运行）

$('.off').click(function(event) {
    event.preventDefault();
    $(".on").addClass("off").removeClass("on");
    $(this).addClass("on").removeClass("off");
});
$('.on').click(function(event) {
    event.preventDefault();
    $(this).addClass("off").removeClass("on");
});

有谁知道这里发生了什么？我的代码中有什么问题或我在这里遇到过某种错误吗？

http://jsfiddle.net/ZC3CW/6/

Answer 1

您使用click()绑定事件的选择器用于选择要添加事件处理程序的元素。运行处理程序时不考虑选择器。

你应该寻找更像这样的东西：

$('li').click(function(event) {
    event.preventDefault();

    if ($(this).hasClass('off')) {
        $(".on").addClass("off").removeClass("on");
        $(this).addClass("on").removeClass("off");
    } else { // $(this).hasClass('on');
        $(this).addClass("off").removeClass("on");
    }
});

您可能希望通过向li或ul添加类/ ID来使li选择器更明确。

为了进一步混淆，你也可以这样做（如果你使用的是jQuery＆gt; 1.7）;

$(document).on('click', '.off', function(event) {
    event.preventDefault();
    $(".on").addClass("off").removeClass("on");
    $(this).addClass("on").removeClass("off");
});
$(document).on('click', '.on', function(event) {
    event.preventDefault();
    $(this).addClass("off").removeClass("on");
});

这是因为.on()函数通过将事件处理程序附加到所选元素（document）来工作，并且只对指定的事件执行处理程序（函数）（{{1} }）如果事件源自的元素在事件触发时与选择器click 匹配，而不是在绑定时。

Answer 2

我建议在不同的选择器上添加一个点击手柄，这应该适合你...

$("ul li a").click(function(e){
   e.preventDefault();

   if($(this).hasClass("off")){
      $("ul li a").addClass("off").removeClass("on");
      $(this).addClass("on").removeClass("off");
   }
   else{
      $(this).addClass("off").removeClass("on");
   }
});

Answer 3

问题是jQuery处理程序在页面加载时会附加，并且无论是否更改类，都保持不变。使用 ~~live('click', handler)~~ on('click', handler)代替click（）。

编辑：注意到.live（）在jQuery 1.7中已被弃用。

Answer 4

我看到的问题是，在点击事件发生时，您的“on”类没有播放，因此永远不会调用$('.on').click方法。

尝试在更改课程后重新分配您的活动（示例如下）：

var assignClicks = function () {
    $('.off').click(function(event) {
        event.preventDefault();
        $(".on").addClass("off").removeClass("on");
        $(this).addClass("on").removeClass("off");
        assignClicks();
    });
    $('.on').click(function(event) {
        event.preventDefault();
        $(this).addClass("off").removeClass("on");
        assignClicks();
    });
};
assignClicks();

希望这有帮助，

皮特

Answer 5

点击绑定到元素而不是类。也许您可以将事件附加到

元素并检测/切换元素类：

$('li').click(function(event) {
    event.preventDefault();
    if( $(this).hasClass('on') ) {
        $(this).removeClass('on');
    }
    else {
        $(this).addClass('on');
        $(this).siblings().removeClass('on');
    }
});

添加/删除类时，jQuery单击函数表现奇怪

5 个答案: