按钮点击计数器

Question

我有这个jQuery代码来统计我的按钮点击次数，但是由于某种原因，它仅需单击一下就停止。请帮我修复它。

$(function() {
  $('.btn').click(function() {
    $(this).val(this.textContent + 1);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn" value="0">

Answer 1

使用this.value获取当前值：

$(function() {
  $('.btn').click(function() {
    $(this).val(parseInt($(this).val()) + 1);
  });
});

摘要：

$('.btn').click(function() {
  $(this).val(parseInt($(this).val()) + 1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn" value="0">

Answer 2

输入通常没有有意义的textContent-而是具有值。要从按钮中检索当前的值，请在具有该元素的jQuery集合上调用.val()，或访问普通元素的.value。

请注意，由于.value始终是 strings ，因此您还必须将其强制转换为数字，以便对其正确添加1，否则将串联： / p>

$('.btn').click(function() {
  $(this).val(Number($(this).val()) + 1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn" value="0">