jQuery在不应该切换的时候

Question

So I got myself this far and I've solved the problem I was having but I'd still like to know why this is.

First, here is my original code:

$(function(){
    var navListLength = $('nav ul li').length;

    buttonPress(1);
    function buttonPress(i){

        if(i < navListLength){

            $('nav ul li a:nth-child(' + i + ')').click(function(){
                $(this).toggleClass('button-pressed');

                console.log('Button Down');

                setTimeout(function(){
                    $('nav ul li a:nth-child(' + i + ')').toggleClass('button-pressed');

                    buttonPress(i + 1);
                    console.log('Button Up');

                }, 500);
            });
        }
    }
});

It's supposed to toggle the style of a single link in a navigation list when it's clicked and not affect any other links in the list.

I wanted to do it this way so that I could add any amount of links to this list in the future without having to create a new a new class and add it to the jQuery each time.

The first toggle works as expected. But the second toggle is being applied to all of the links and it creates an inverted effect. So all of the links are opposite of what they are supposed to be except the link being clicked.

I solved the problem by changing the first toggleClass to addClass and the second toggleClass to removeClass. But I shouldn't have to do that.

Could anyone tell me why this is?

Here's a picture of my buttons:

Answer 1

You're doing way too much work just to toggle a class on click. You don't need to make an array of all the navigation items, the whole point of jQuery is that it handles selecting DOM elements for you.

Try this:

$(function() {

  $('nav ul li').click(function() {
    $(this).toggleClass('button-pressed');
  });

});

You don't have to handle making sure the others aren't affected. Only the clicked element gets toggled.

-- EDIT --

I see what you were going for with the setTimeout() now. You can do it inside the click handler, like this:

  $('nav ul li').click(function() {
    // store the selection in a variable
    var $this = $(this);
    $this.toggleClass('button-pressed');
    window.setTimeout(function() {
      $this.toggleClass('button-pressed');
    }, 500);
  });

FIDDLE

Answer 2

Why now in pure CSS like:

LIVE DEMO

 <span class="button" tabindex="1"> 
   <span>Home</span>
 </span>

span.button{
  display:inline-block;
  border-radius:9px;
  background:#ddd;
  padding:6px;
  vertical-align:middle;
  outline:none;
}
span.button > span{
  background:#F06BAE;
  color:#fff;
  font-size:20px;
  font-weight:bold;
  display:inline-block;
  padding:10px 25px;
  border-radius: 6px;
  border-bottom:4px solid #CB4589;
  transition: border 0.3s;
}
span.button:focus > span{
  border-top: 4px solid #FCA9D2;
  border-bottom-width:0;
}