Javascript 根据属性按类选择元素，然后添加或删除类

对于我的一个项目，我想在单击按钮时存储导航菜单中每个元素的

数据

信息

我建立了一个一页的网站，有两个级别的导航

• 一个主菜单
• 每个“页面”底部的按钮

我的问题是，我编写了一个脚本，在使用主菜单时添加/删除“selected”类。所以到目前为止一切都很好，但我希望在使用第二级导航时，菜单可以添加/删除“selected”类。 这就是我目前所处的困境

以下是我所拥有的：

我的主菜单：

<nav>
  <ul>
    <li><a class="btn selected" href="#accueil" data-scrollOptions="accueil">accueil</a></li>
    <li><a class="btn" href="#apropos" data-scrollOptions="apropos">à propos</a></li>
    <li><a class="btn" href="#nosprojets" data-scrollOptions="nosprojets">nos projets</a></li>
    <li><a class="btn" href="#contact" data-scrollOptions="contact">contact</a></li>
  </ul>
</nav> 

<span class="scrolldown"><a href="#apropos" data-scroll="apropos">ScrollDown</a></span>
<span class="scrolldown"><a href="#nosprojets" data-scroll="nosprojets">ScrollDown</a></span>
<span class="scrolldown"><a href="#contact" data-scroll="contact">ScrollDown</a></span>

我的第二个脚本：（不工作）

如何在数组中推送每个值（

accueil

，

apropos

，

nosprojets

，

contact

），然后使用它添加/删除类

目前的结果如何

您可能希望使用“this”上下文来解决您的问题。当您处于“每个”循环中时，这一行：

var attributs = $('.btn').data('data-scrollOptions');

不会选择单个项目。实际上，在本例中，它可能返回第一个$（'.btn'）项的数据值

要访问每个值，可以执行以下操作：

var attribut = $(this).data('data-scrollOptions');

“this”指的是当前上下文。在我们的例子中，它是每个循环中单个“btn”项的范围。希望这有帮助

您可能希望使用“this”上下文来解决您的问题。当您处于“每个”循环中时，这一行：

var attributs = $('.btn').data('data-scrollOptions');

不会选择单个项目。实际上，在本例中，它可能返回第一个$（'.btn'）项的数据值

要访问每个值，可以执行以下操作：

var attribut = $(this).data('data-scrollOptions');

---

“this”指的是当前上下文。在我们的例子中，它是每个循环中单个“btn”项的范围。希望这能有所帮助。

也许你的方法过于复杂了。有很多不同的方法可以做到这一点，你可以使用很多不同的事件（所以不要因为我没有“他们喜欢的方式”而指责我）。但你可以这样做

$('.scrolldown').on('click', function(){

   $('.btn', 'nav').removeClass('selected');
   $('.btn[href="'+$('a',this).attr('href')+'"]','nav').addClass('selected'); 

});

（函数（$）{
$（'.scrolldown'）。在（'click'，function（）上{
$（'.btn'，nav'）.removeClass（'selected'）；
$（'.btn[href=“'+$（'a'，this）.attr（'href'）+'”]，'nav'）.addClass（'selected'）；
});
})（jQuery）
。已选定{
背景：红色；
}











也许你的方法过于复杂了。有很多不同的方法可以做到这一点，你可以使用很多不同的事件（所以不要因为我没有“他们喜欢的方式”而指责我）。但你可以这样做

$('.scrolldown').on('click', function(){

   $('.btn', 'nav').removeClass('selected');
   $('.btn[href="'+$('a',this).attr('href')+'"]','nav').addClass('selected'); 

});


（函数（$）{
$（'.scrolldown'）。在（'click'，function（）上{
$（'.btn'，nav'）.removeClass（'selected'）；
$（'.btn[href=“'+$（'a'，this）.attr（'href'）+'”]，'nav'）.addClass（'selected'）；
});
})（jQuery）
。已选定{
背景：红色；
}











您使用的是$.data（'scroll-options'），但html中的数据属性是data scroll-options。实际上这可能是惯例。。。不确定。是的，我在发帖之前做了一些改变。在我的html中也是“数据滚动选项”：）如果问题得到解决，请选择您最喜欢的答案：）您使用的是$.data（“滚动选项”），但html中的数据属性是数据滚动选项。实际上这可能是惯例。。。不确定。是的，我在发帖之前做了一些改变。这是“数据滚动选项”在我的html中也：）请选择您最喜欢的答案，如果您的问题得到解决：）真棒！此外，您可能会对jQuery的Oh感兴趣，而且您可能希望在“each”循环之外声明数组令人惊叹的！此外，您可能会对jQuery的Oh感兴趣，而且您可能希望在“each”循环之外声明数组完全是我，我总是把事情复杂化。。。xD谢谢你的帮助=）完全是我，我总是把事情复杂化。。。xD感谢您的帮助=）