Javascript jQuery：使用CSS类遍历每个元素

我试图通过添加一个CSS类（“clickedNav”类）来创建一个导航栏，使您当前访问的选项卡具有不同的背景颜色。我有一个循环来迭代并删除颜色（因此只有当前选项卡高亮显示），然后我将颜色添加到单击的链接中。 现在，它成功地添加了类（clickedNav），但是我事先删除它们的循环并没有删除它们（我看到很多“Hey”，但没有“yup”）。以下是相关代码：

$('.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的回复，以获取更有效的解决方案。

您有几个问题。首先，在您的

hasClass

中，您将在类前面放置一个点。那是不必要的。其次，您已经定义了事件has

e

，但您将其用作

事件

。第三，您应该在

.each（）中使用
$（this）

这应该可以解决问题

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

你有几个问题。首先，在您的
hasClass
中，您将在类前面放置一个点。那是不必要的。其次，您已经定义了事件has
e
，但您将其用作
事件
。第三，您应该在
.each（）中使用
$（this）

这应该可以解决问题

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

无需使用。每个函数，只需使用选择器即可（并按照scrblnrd3所述，从
removeClass中取出
“
）

这样，该函数将仅在具有该类的元素上执行（尽管您可以使用
'.navlink'
作为选择器，它将执行完全相同的操作）
无需。每个函数都只需使用选择器（并利用
）
从
removeClass中退出（如scrblnrd3所述）

这样，该函数将只在具有该类的元素上执行（尽管您可以使用
'.navlink'
作为选择器，它将执行完全相同的操作）
，但仍然无法正常工作。在
.each（）
循环中，当测试类时，您仍然在引用整个
$（'.navlink'）
集合，您需要使用
$（此）
，而在循环中，您只需测试当前项。@winterblood Whoopsies感谢scrblnrd3提供的快速且信息丰富的响应！我更改了代码，现在效果很好。但仍然不能正常工作。在
.each（）
循环中，当测试类时，您仍然在引用整个
$（'.navlink'）
集合，您需要使用
$（此）
，而在循环中，您只需测试当前项。@winterblood Whoopsies感谢scrblnrd3提供的快速且信息丰富的响应！我修改了代码，现在效果很好。