如何在列表中的按钮上按间隔进行触发点击

Question

我有一个带有按钮的列表。我想按顺序对每个按钮进行间隔触发，如果达到最后一个间隔，它会再次开始。

setInterval(function() {
  $('button').trigger('click');
}, 5000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><button></button></li>
  <li><button></button></li>
  <li><button></button></li>
  <li><button></button></li>
  <li><button></button></li>
</ul>

Answer 1

要实现这一点，您只需要一个变量来跟踪应单击哪个按钮，然后使用 eq() 到 select button by index:

let index = 0, $buttons = $('button');

setInterval(function() {
  $buttons.eq(index % $buttons.length).trigger('click');
  index++;
}, 1000);

// to test:
$('button').on('click', function(i) {
  console.log(`Button ${this.id} was clicked`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><button id="1"></button></li>
  <li><button id="2"></button></li>
  <li><button id="3"></button></li>
  <li><button id="4"></button></li>
  <li><button id="5"></button></li>
</ul>

值得注意的是，触发 click 事件不一定是实现您所需的最佳方法。我建议直接调用一个函数。

Answer 2

执行此操作的方法数。例如，只需使用一个 setInterval 连续循环它们（使用 vanilla）：

let buttons = document.getElementsByTagName('button');
let index = 0;
setInterval(()=>{
  index = index % buttons.length; // set to 0 if over max
  buttons[index].click();
  // do something...
  buttons[index].innerText = buttons[index].innerText != 'clicked' ? 'clicked' : 'click me';
  // ...do something
  index++;
},1000)

<button>click me</button>
<button>click me</button>
<button>click me</button>
<button>click me</button>

如何在列表中的按钮上按间隔进行触发点击

How to make a trigger click with interval on buttons in list

javascript

jquery

triggers

intervals