jQuery点击按钮循环展示元素、隐藏重置及跳过首元素问题解决

问题根因 #

你遇到的跳过首元素问题是计数器逻辑冲突导致的：当你在each循环内将i重置为0后，循环结束仍会执行一次全局的i++，导致下一次触发函数时i初始值为1，直接跳过了下标为0的第一个元素。同时将重置逻辑放在遍历循环中会重复执行，存在冗余。

修复后代码 #

你原来的CSS和HTML代码不需要改动，直接替换JS部分即可正常运行：

$(document).ready(function () {
  var images = $(".click-image");
  let i = 0;

  function showImage() {
    // 所有元素都展示完的情况，执行全部隐藏+重置
    if (i === images.length) {
      images.hide();
      i = 0;
      return;
    }
    // 仅展示当前下标的元素
    images.hide().eq(i).show();
    i++;
  }

  $(".and-button").click(showImage);
});

逻辑说明 #

• 优先判断当前是否已经展示完所有元素：如果是，直接隐藏所有元素、重置计数器为0，提前结束当前函数，不执行后续的计数器自增操作，确保下一次点击从下标0开始
• 用jQuery自带的eq()方法直接获取对应下标的元素，无需遍历所有元素判断下标，执行效率更高
• 每次展示前先统一隐藏所有元素，避免之前展示的元素残留，逻辑更简洁易维护

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