如何让计数函数对所有动态生成按钮实现独立计数？

我正在实现点击按钮让对应行计数加1的功能，按钮和表格行都是动态生成的。但有多行时计数功能异常——所有按钮用同一个类名，导致计数会延续其他按钮的数值。

举个例子：

初始状态：

姓名	按钮	计数
john	投票	4
jane	投票	0

点击Jane的投票按钮一次后，结果却变成这样：

姓名	按钮	计数
john	投票	4
jane	投票	5

我希望点击Jane的按钮时，她的计数从1开始独立递增，而且不想使用任何插件。

当前代码 #

$("form").submit(function(e){  
    e.preventDefault();  
    var name = $("input[name='name']").val(); 
     
    $(".data-table tbody").append("<tr data-name='"+name+"' class='vote'><td>"+name+"</td><td><button class='but' id="+name+">VOTE</button></td><td><button class='btn btn-info btn-xs btn-edit'>Edit</button><button class='btn btn-danger btn-xs btn-delete'>Delete</button></td><td></td></tr>");  
    $("input[name='name']").val(''); 
});

// 计数逻辑
let count = 1;
$("tbody").on("click", ".but", function(){
    $(this).parents("tr").find("td:eq(3)").html('<span>'+count+'</span>');
    return count++;
}); 

解决方案 #

问题出在你用了全局变量count，所有按钮共享同一个数值，自然会互相影响。要实现独立计数，给每一行维护自己的计数状态就行，下面是两种简单的实现方式：

方式1：用元素的data-*属性存计数

每次点击时，从当前行的自定义data属性里读取计数，更新后再存回去：

$("tbody").on("click", ".but", function(){
    // 获取当前行的jQuery对象
    const $row = $(this).closest("tr");
    // 读取当前计数，没有的话默认0
    let currentCount = parseInt($row.data("count")) || 0;
    // 计数加1
    currentCount++;
    // 更新到对应的单元格
    $row.find("td:eq(3)").html('<span>'+currentCount+'</span>');
    // 把更新后的计数存回行的data属性
    $row.data("count", currentCount);
});

方式2：直接读取计数单元格的当前值

如果不想用data属性，也可以直接从显示计数的单元格里读值，再递增：

$("tbody").on("click", ".but", function(){
    const $countTd = $(this).closest("tr").find("td:eq(3)");
    // 读取当前值，为空或非数字的话默认0
    let currentCount = parseInt($countTd.text()) || 0;
    currentCount++;
    $countTd.html('<span>'+currentCount+'</span>');
});

注意事项 #

• 两种方式都不需要全局变量，每一行的计数完全独立
• 动态生成行的时候不用额外处理，首次点击会自动初始化计数为0
• 纯jQuery实现，不需要任何第三方插件

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