Question

我现在已经尝试了很多不同的方法，但尚未取得任何进展或成功。我正在使用基础5框架，并试图让一组选项卡自动循环活动。这是一个link。由于不仅仅是点击活动类更改，我认为更容易模拟点击而不是addClass（活动）等。这是我目前正在使用的内容。

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课程。您可以使用兄弟选择器来查找下一个元素。

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);

使用.click（）和setInterval循环选项卡

2 个答案: