jQuery实现各按钮独立点击计数功能失效问题排查

预期实现点击按钮时独立统计每个按钮的点击次数，互不干扰，效果示例：

• 全局计数器冲突：仅在全局作用域声明了一个变量i存储计数，所有按钮点击都会累加这同一个值，根本无法实现单按钮独立计数。
• 选择器匹配失效：元素id包含[、]这类特殊字符时，未做转义直接拼接进jQuery选择器，会被引擎识别为属性选择器语法，完全无法定位到计数显示的元素，点击后不会有任何内容更新。
• JS语法错误：代码末尾缺少$(document).ready()对应的闭合括号与分号，会直接抛出语法错误，导致整个交互脚本无法运行。
• 标签使用不规范：HTML标准仅定义了h1~h6六级标题标签，代码中使用的<h7>是无效自定义标签，可能出现样式兼容问题。

核心思路是将计数和对应按钮绑定存储，废弃全局计数器；同时避免拼接带特殊字符的id选择器，直接通过DOM层级关系定位当前按钮对应的计数元素，从根源上规避选择器转义的问题。

修正后的PHP按钮生成代码 #

替换无效的h7标签为span，移除不必要的带特殊字符的id属性，给计数标签添加统一类名方便定位：

<?php for($i = 0; $i < 5; $i++){?>
<a class="btn btn-primary btn-count" data-id="<?php echo $i;?>"> 
Click Me <span class="count-num">(0)</span>
</a>
<?php }?>

修正后的jQuery交互代码 #

每个按钮的点击次数存储在自身的data属性中，点击时仅更新当前按钮对应的计数显示：

$(document).ready(function() {
  $(".btn-count").click(function(){
    // 读取当前按钮已存储的点击数，首次点击默认从0开始计数
    let clickNum = $(this).data('count') || 0;
    clickNum++;
    // 将更新后的计数存回当前按钮
    $(this).data('count', clickNum);
    // 查找当前按钮内部的计数标签，更新显示内容
    $(this).find('.count-num').text(`(${clickNum})`);
  });
});

若必须保留原有带方括号的id命名规则，需要对选择器中的特殊字符做双重转义，例如定位计数元素的写法要改为$("#count\\["+ id +"\\]")，但这种写法维护成本高、易写错，不推荐使用。

内容的提问来源于stack exchange，提问作者Marchel Gunawan Dwi Steya