javascript - jQuery 在不应该切换的时候切换

Question

到目前为止，我已经解决了我遇到的问题，但我仍然想知道这是为什么。

首先，这是我的原始代码:

$(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);
            });
        }
    }
});

它应该在单击时切换导航列表中单个链接的样式，并且不会影响列表中的任何其他链接。

我想这样做，这样我将来就可以向此列表添加任意数量的链接，而不必每次都创建一个新类并将其添加到 jQuery 中。

第一个切换按预期工作。但第二个切换应用于所有链接，并产生了反转效果。因此，除了被单击的链接之外，所有链接都与应有的相反。

我通过将第一个toggleClass更改为addClass并将第二个toggleClass更改为removeClass解决了这个问题。但我不应该这样做。

谁能告诉我这是为什么？

这是我的按钮的图片:

Answer 1

仅仅为了在点击时切换一个类，你就做了太多的工作。您不需要创建所有导航项的数组，jQuery 的全部意义在于它为您处理选择 DOM 元素。

试试这个:

$(function() {

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

});

您不必确保其他人不受影响。只有被点击的元素才会被切换。

-- 编辑--

我现在明白您使用 setTimeout() 的目的了。您可以在点击处理程序中执行此操作，如下所示:

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