如何递增jQuery回调函数的索引i，避免.text()/.html()显示初始0

问题核心在于：jQuery的.text()/.html()回调里的i是当前元素在匹配集合中的索引，因为你每次只选中一个元素（#test1/#test2），所以这个值永远是0。要实现递增计数，你需要自己维护独立的计数器变量，通过闭包保留每次点击后的计数状态。

修改后的代码如下：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // 为每个按钮声明独立的计数器，初始值设为0
      let count1 = 0;
      let count2 = 0;

      $("#btn1").click(function(){
        // 点击时先递增计数器，确保第一次显示1而非0
        count1++;
        $("#test1").text(function(_, origText){
          // 使用自定义的count1替代原有的i
          return "Old text: " + origText + " New text: Hello world! (index: " + count1 + ")";
        });
      });

      $("#btn2").click(function(){
        count2++;
        $("#test2").html(function(_, origText){
          return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + count2 + ")";
        });
      });
    });
  </script>
</head>
<body>
  <p id="test1">This is a <b>bold</b> paragraph.</p>
  <p id="test2">This is another <b>bold</b> paragraph.</p>
  <button id="btn1">Show Old/New Text</button>
  <button id="btn2">Show Old/New HTML</button>
</body>
</html>

关键说明： #

• 把计数器count1/count2声明在点击事件外部，这样每次点击都会保留之前的数值，实现递增效果。
• 点击时先执行count1++，确保第一次点击就显示1，避免初始的0。
• 回调里用下划线_替代原有的i变量（仅表示该参数未被使用，也可保留i但不调用），改用自定义的计数器值。

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