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

Question

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

我建立了一个包含两个导航级别的单页网站。

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

我的问题是，当我使用主菜单时，我编写了一个脚本来添加/删除“选定”类。 因此到目前为止，一切工作正常，但是当我也使用第二级导航时，我希望菜单添加/删除“选定”类。 那是我目前停留的地方。

这是我所拥有的：

我的主菜单：

<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>

我的第一个脚本：（正在运行）

// onClick - class distribution
$(".btn").click(function () {
  $(".btn").removeClass("selected");
  $(this).addClass("selected");        
});

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

// onClick - dataTrigger
$(".scrolldown").click(function() {
  $('.btn').each(function () {
    var myArray =[];
    var attributs = $('.btn').data('scroll-options');
    myArray.push(attributs);
    console.log(myArray);
  });
});

如何将每个值（ accueil ， apropos ， nosprojets ， contact ）推nosprojets数组中，然后使用它添加/删除类？

现在我阵列的console.log的结果

Answer 1

$('.btn').each(function () {
    var myArray =[];
    var attributs = $('.btn').data('scroll-options');
    myArray.push(attributs);
    console.log(myArray);
  });

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

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

不会选择一个项目。 实际上，在这种情况下，它可能返回第一个$（'。btn'）项的数据值。

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

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

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

Answer 2

也许您过于复杂了。 有很多不同的方法可以使用，并且可以使用许多不同的事件（因此，没有人会因为不按“他们的首选方法”而射击我）。 但是您可以改为执行此操作。

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

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

});

 (function($) { $('.scrolldown').on('click', function() { $('.btn', 'nav').removeClass('selected'); $('.btn[href="' + $('a', this).attr('href') + '"]', 'nav').addClass('selected'); }); })(jQuery); 

 .selected { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> <div> <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> </div> </div>