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

Question

我现在已经尝试了很多不同的方法，但还没有取得任何进展或成功。我正在使用 foundation 5 框架，并试图让一组选项卡自动循环激活。这是一个link .由于不仅仅是事件类在点击时发生变化，我认为模拟点击会比 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。您也不需要添加 .cycle 类。您可以使用兄弟选择器来查找下一个元素。

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

虽然如果你想让它循环，你需要在到达终点时选择第一个。你可以这样做:

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