使用 .click() 和 setInterval 循环选项卡

Question

我现在已经尝试了很多不同的方法，但还没有取得任何进展或成功。我正在使用 foundation 5 框架，并试图让一组选项卡自动循环激活。这里有一个link。由于不仅仅是活动 class 在点击时发生变化，我认为模拟点击会比 addClass(active) 等更容易。这是我目前正在使用的。

HTML:

<dl class="tabs" datatab>
  <dd class="active">
    <a href="efs-tabpane-1-0>Promote</a>
  </dd>
  <dd class>
    <a href="efs-tabpane-1-1>Educate</a>
  </dd>
  <dd class>
    <a href="efs-tabpane-1-2>Analyze</a>
  </dd>
  <dd class>
    <a href="efs-tabpane-1-3>Report</a>
  </dd>
</dl>

JS:

$( "dd a" ).addClass("cycle");

setInterval(function(){
  $(this).next("a.cycle").click(), console.log("test");
}, 3000);

控制台正确记录了消息，但实际上没有发生任何其他事情。任何帮助表示赞赏。谢谢。

Answer 1

this 不是您所期望的。它将是 window.

您需要的是获取对该元素的引用的不同方法。

你可以这样做...

var clickNext = function() {
  var $active = $('.tabs .active');
  var $next = $active.next();
  if ( ! $next.length) {
      $next = $('.tabs dd:first-child');
  }
  $next.find('a').click();
  setTimeout(clickNext, 3000);
};

clickNext();

Answer 2

this 在你的例子中是 window。您也不需要添加 .cycle class。您可以使用同级 selector 来查找下一个元素。

setInterval(function(){
  $(".tabs .active + dd a").click();
}, 3000);

虽然如果你想让它循环，当你到达终点时你需要 select 第一个。你可以这样做：

setInterval(function(){
  if($(".tabs .active + dd a").length){
    $(".tabs .active + dd a").click();
  }else{
    $(".tabs dd:first a").click();
  }
}, 3000);

使用 .click() 和 setInterval 循环选项卡

Cycle tabs with .click() and setInterval

javascript

jquery

zurb-foundation

cycle