toggleClass doesn't seem to apply here. Any clue why?

Question

Using waypoint library, however, the problem seems NOT to be related with the script, either, with our bad understanding over general jquery and javascript comprehension.

With this line, we are hopping to select ALL anchors where attribute href as a certain value, and add or remove a class.

$('a[href="' + $(this).attr('id') + '"]').toggleClass("marca-menu", direction === 'down');

But nothing happens.

The code, and below, the fiddle.

JS:

 $(document).ready(function() {   
   $('#container section').each(function() {            
     $(this).waypoint(function(direction) {
       $('a[href="' + $(this).attr('id') + '"]').toggleClass("marca-menu", direction === 'down');
     });
   });
});

HTML:

<nav class="main-menu">
<ul>
 <li><a href="#slide3" target="_self">plimplim</a></li>
 <li><a href="#slide4" target="_self">plimplomm</a></li>
 <li><a href="#slide5" target="_self">plimplumm</a></li>
</ul>
</nav>

<section id="slide3">
  <h1>bababaadasda</h1>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
</section>
<section id="slide4">
 <h1>SLIDE 4</h1>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
</section>
<section id="slide5">
 <h1>SLIDE 5</h1>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
    <p>asdsadasdsad</p>
</section>

CSS: nav { display:block; position: fixed; width: 100%; background: red; }

.marca-menu {
    background-color: blue;
}

You can check it out here:

http://jsfiddle.net/talofo/Bkws7/

What am I doing wrong ?

Answer 1

Didn't saw your posted html, use that:

$('a[href="#' + this.id + '"]').toggleClass("marca-menu", direction === 'down');