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

Question

For one of my projects I want to store the data information of each element of my navigation menu when I click on a button.

I've built a one-page website with two levels of navigation.

• One main menu
• Button on the bottom of each "page"

My problem is that I've written a script to add/remove the class "selected" when I use the main menu. So everything is working fine so far BUT I want the menu to add/remove the class "selected" when I use the second level of navigation too. That's where I'm stuck at the moment.

Here's what I have:

My main menu:

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

The button in the "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>

My 1st script: (working)

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

My 2nd script: (not working)

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

How can I push each value ( accueil , apropos , nosprojets , contact ) in my array and then use it to add/remove class?

The result for now console.log of my array

Answer 1

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

You might want to be using the 'this' context to resolve your problem. While you are in your 'each' loop, this line :

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

won't select a single item. In fact, in this case, it is probably returning the data value for the first $('.btn') item.

To access each value, you could do something like this :

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

'this' refers to the current context. In our case, it is the scope of a single 'btn' item, in the each loop. Hope this helps.

Answer 2

Maybe you're overcomplicating the way to do this. There's a bunch of different ways to do it, and a number of different events you could use (so don't anyone shoot me for not doing it "their preferred way"). But you could do this instead.

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