addClass removeClass jQuery与sliderhow的问题

这里有一个链接到

Javascript:

var headerCount;
var timeDelay;
$(document).ready(function () {
  headerCount = $('.headerlink').length;
  timeDelay = $('.current').attr('ref');
  if (undefined != timeDelay) {
    timeDelay = "5000"
  }
  setTimeout("advance()", timeDelay);
});

function advance() {
  $('.current').next('.headerlink').addClass('current2');
  $('.current').removeClass("current");
  $('.current2').addClass('current').removeClass('current2');
  if (headerCount == $(".current").index('.headerlink')) {
    $('.current').removeClass('current');
    $('.headerlink:nth-child(1)').addClass('current');
  }
  timeDelay = $('.current').attr('ref');
  if (undefined != timeDelay) {
    timeDelay = "5000"
  }
  setTimeout("advance()", timeDelay);
}​

HTML:

问题：代码的目标是将

.current

添加到

下一个（'.headerlink'）

，然后从原始代码中删除

.current

。但出于某种原因，它只是删除了

.current

（它似乎可以非常快速地添加/删除所有匹配的元素）

我错过了什么？

---

​

我相信你的意思是：

undefined == timeDelay

而不是

=

您正在将
undefined
作为
setTimeout
的持续时间传递，从而使其立即执行


您还可以简化代码，同时不再需要
current2

var $current = $('.current');
var $newCurrent = $current.next('.headerlink').addClass('current');

$current.removeClass('current'); // This still only has the first element even though you added .current to another

诀窍在于变量
$current
包含创建时与其选择器匹配的元素。对DOM的后续更改不会影响
$current
中的匹配元素集

带有一些额外清理的完整示例执行以下操作：


代码如下：

$(document).ready(function () {
  setTimeout("advance()", $('.current').attr('ref') || 1000);
});

function advance() {
  var nextHeaderLink = $('.current').removeClass("current").next('.headerlink');

  if( nextHeaderLink.length == 0 )
      nextHeaderLink = $('.headerlink:first-child');

  nextHeaderLink.addClass('current');

  setTimeout("advance()", nextHeaderLink.attr('ref') || 1000);
}​

这是一个简化版本，删除了不相关的代码行。
请在您的答案中直接包含相关代码，最好对所做的更改进行一些解释。如果无法访问JSFIDLE，这个答案应该仍然相关。
$(document).ready(function () {
  setTimeout("advance()", $('.current').attr('ref') || 1000);
});

function advance() {
  var nextHeaderLink = $('.current').removeClass("current").next('.headerlink');

  if( nextHeaderLink.length == 0 )
      nextHeaderLink = $('.headerlink:first-child');

  nextHeaderLink.addClass('current');

  setTimeout("advance()", nextHeaderLink.attr('ref') || 1000);
}​