addClass removeClass jQuery 问题与sliderhow

Posted 2023-02-25

【中文标题】addClass removeClass jQuery 问题与sliderhow

【英文标题】：addClass removeClass jQuery problems with sliderhow

【发布时间】：2012-10-11 17:32:12

【问题描述】：

这是JSfiddle的链接。

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：

<a ref="5000" class="headerlink current" href="http://www.raceramps.com/12-4thqtr-twenty-five-dollar-rebate.aspx"> <img class="headerimg" src="http://www.raceramps.com/images/promos/4thQTR[25_rebateCheck].jpg" /> </a>

<a class="headerlink" href="http://www.raceramps.com/2012-3rdqtr-25-visa.aspx"> <img class="headerimg" src="http://www.raceramps.com/images/promos/3rdQTR[25VISA_rebate].jpg" /> </a>

<a class="headerlink" href="http://www.raceramps.com/12-4thqtr-twenty-five-dollar-rebate.aspx"> <img class="headerimg" src="http://www.raceramps.com/images/promos/4thQTR[25_rebateCheck].jpg" /> </a>

<a class="headerlink" href="http://www.raceramps.com/12-4thqtr-twenty-five-dollar-rebate.aspx"> <img class="headerimg" src="http://www.raceramps.com/images/promos/4thQTR[25_rebateCheck].jpg" /> </a>

问题：目标是代码将.current 添加到next('.headerlink')，然后从原始代码中删除.current。但是由于某种原因，它只是删除了.current（它似乎非常快速地添加/删除了所有匹配的元素）。

我错过了什么？ ​

【参考方案1】：

这样就可以了：

http://jsfiddle.net/carlosmartinezt/Erw8y/29/

代码如下：

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

这是一个简化版本，删除了不相关的代码行。

【讨论】：

请在您的答案中直接包含相关代码，最好对所做的更改进行一些解释。如果 jsfiddle 无法访问，这个答案应该保持相关。

【参考方案2】：

我相信你的本意是：

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 中匹配的元素集。

带有一些额外清理的完整示例here