在带有文本标签的按钮（JQuery）中递增计数器[重复]

Posted 2023-05-07

【中文标题】在带有文本标签的按钮（JQuery）中递增计数器[重复]

【英文标题】：Incrementing counter within a text labeled button (JQuery) [duplicate]

【发布时间】：2019-03-10 13:13:35

【问题描述】：

我想分别增加每个按钮的计数。我知道 .find jquery 函数会派上用场。但是我的按钮没有增加

即 “你点击了我：100 次” “你点击了我：22 次” “你点击了我：71 次”

$('#target').on('click', function() 
  var numoftimes = parseInt($(this).find('span').html());
  $(this).find('span').html(numoftimes + 1);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="target" type="button">You clicked me: <span>0</span>times</button>
<button id="target" type="button">You clicked me: <span>0</span>times</button>
<button id="target" type="button">You clicked me: <span>0</span>times</button>

【参考方案1】：

id 属性在文档中应该是唯一的，使用 class 代替。另外，我建议您在处理纯文本内容时使用.text() 而不是.html()：

$('.target').on('click', function()
  var numoftimes = parseInt( $(this).find('span').text());
  $(this).find('span').text(numoftimes + 1);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="target" type="button">You clicked me: <span>0</span>times</button>
<button class="target" type="button">You clicked me: <span>0</span>times</button>
<button class="target" type="button">You clicked me: <span>0</span>times</button>

【讨论】：

应该知道是 .text 与 .html 扫描让我失望了。正是我想要的。一百万谢谢！

@NanoNet，不客气 :)

【参考方案2】：

您使用的 id 对于每个元素都必须是唯一的，这样您就可以定义通用且可用于相同的类

$('.target').on('click', function() 
  var numoftimes = parseInt($(this).find('span').html());
  $(this).find('span').html(numoftimes + 1);
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="target" class="target" type="button">You clicked me: <span>0</span>times</button>
<button id="target1" class="target" type="button">You clicked me: <span>0</span>times</button>
<button id="target2" class="target" type="button">You clicked me: <span>0</span>times</button>

【参考方案3】：

您需要使用类而不是 ID。 ID 必须是唯一的

$('.target').on('click', function() 
  var numoftimes = parseInt($(this).find('span').html()); // or .text()
  $(this).find('span').html(numoftimes + 1); // or .text()
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="target" type="button">You clicked me: <span>0</span>times</button>
<button class="target" type="button">You clicked me: <span>0</span>times</button>
<button class="target" type="button">You clicked me: <span>0</span>times</button>