Select 元素由 class 基于 attr 然后添加或删除 class

Question

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

我已经建立了一个具有两级导航的单页网站。

一个主菜单
每个 "page"

我的问题是，当我使用主菜单时，我已经为 add/remove class "selected" 编写了一个脚本。所以到目前为止一切正常，但是当我也使用第二级导航时，我希望菜单 add/remove class "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>

"page"中的按钮：

<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) 推送到数组中，然后将其用于 add/remove class?

目前的结果console.log of my array

Answer 1

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

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

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

不会 select 一个项目。事实上，在这种情况下，它可能返回第一个 $('.btn') 项的数据值。

要访问每个值，您可以这样做：

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

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

Answer 2

也许您将执行此操作的方法过于复杂化了。有很多不同的方法可以做到这一点，并且您可以使用许多不同的事件（所以不要因为我没有这样做而开枪 "their preferred way"）。但你可以这样做。

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

Select 元素由 class 基于 attr 然后添加或删除 class

Select elements by class based on attr then add or remove class

javascript

jquery

arrays

menu

getelementsbyclassname