Question

我正在尝试通过添加CSS类（“clickedNav”类）来创建一个导航栏，其中您正在访问的当前选项卡具有不同的背景颜色。我有一个循环迭代并删除颜色（所以只突出显示当前选项卡），然后我将颜色添加到单击的链接。现在，它正在成功添加类（clickedNav），但是我的循环删除它们并不是删除它们（我看到很多“HEYS”，但没有“是”）。这是相关的代码：

$('.navlink').click(function(e){
    console.log("HEY");
    var self = $(this);

    $('.navlink').each(function(i) {
        if($('.navlink').hasClass('.clickedNav')){
            console.log("yup");
            $('.navlink').removeClass('clickedNav');
        }
    });

    $(this).addClass('clickedNav');
    event.stopPropagation();
});

我做错了什么？

编辑：感谢帮助人员。请参阅scrblndr3对我发布的代码修复的响应，以及Pinpickle对更高效解决方案的响应。

Answer 1

不需要.each函数，只需使用选择器（并将"."取出removeClass，因为scrblnrd3表示）

$('.navlink.clickedNav').removeClass('clickedNav');

这样，该函数只会对那些具有该类的元素执行（尽管您可以使用'.navlink'作为选择器，它将执行完全相同的操作）

Answer 2

你有几个问题。首先，在你的hasClass中，你的课程前面有一个点。那是不必要的。其次，您已将事件定义为e，但您将其用作event。第三，您应该在$(this)

中使用.each()

这应解决问题

$('.navlink').click(function(e){
    console.log("HEY");
    var self = $(this);

    $('.navlink').each(function(i) {
        if($(this).hasClass('clickedNav')){ //No need for a period
            console.log("yup");
            $(this).removeClass('clickedNav');
        }
    });

    $(this).addClass('clickedNav');
    e.stopPropagation();
});

jQuery：使用CSS类迭代每个元素

2 个答案: