Question

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

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

一个主菜单
每个＆＃34;页面底部的按钮＆＃34;

我的问题是我已经编写了一个脚本来添加/删除课程＆＃34;选择＆＃34;当我使用主菜单。所以一切都工作正常到目前为止我想要菜单添加/删除类＆＃34;选择＆＃34;当我使用第二级导航时。这就是我现在陷入困境的地方。

以下是我所拥有的：

我的主菜单：

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

＆＃34;页面中的按钮＆＃34;：

<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），然后使用它来添加/删除类？

现在console.log of my array

的结果

Answer 1

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

您可能希望使用“此”上下文来解决您的问题。当你进入“每个”循环时，这一行：

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

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

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

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

'this'指的是当前的背景。在我们的例子中，它是每个循环中单个'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>

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

2 个答案: