如何为列表中的按钮设置按顺序循环触发点击的定时任务

嘿，我清楚你想要实现的是按顺序逐个触发按钮点击，完成一轮后从头循环的效果。你当前的代码会每隔5秒一次性触发所有按钮的点击，这和你的需求不符，咱们来修改一下：

下面是完整的可运行代码：

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

<script>
// 获取所有按钮的jQuery集合
const buttons = $('button');
// 初始化当前要点击的按钮索引
let currentIndex = 0;

// 设置定时器，每隔5秒触发一次
setInterval(function() {
  // 触发当前索引对应的按钮点击事件
  buttons.eq(currentIndex).trigger('click');
  // 索引自增，准备下一个按钮
  currentIndex++;
  // 如果索引超过最后一个按钮的位置，重置为0，开始新一轮循环
  if (currentIndex >= buttons.length) {
    currentIndex = 0;
  }
}, 5000);
</script>

代码逻辑解释： #

• 首先用$('button')获取页面上所有按钮的集合，存到变量buttons里；
• 用currentIndex变量跟踪当前要点击的按钮位置，初始值为0（对应第一个按钮）；
• 每次定时器触发时，用buttons.eq(currentIndex)选中对应索引的按钮，调用trigger('click')模拟点击操作；
• 点击完成后让currentIndex加1，当它的值大于等于按钮总数时，重置为0，以此实现循环效果。

你可以给按钮加上文本方便测试，点击事件的触发效果会更直观~

内容的提问来源于stack exchange，提问作者mat