javascript - 单击以增加数量

Question

如何让每次点击增加100？我犯了什么错误吗？请告诉我谢谢

$(".label").click(function () {
        var number = 100;
        number++;
        $(".shownumber").text(number);

    });

.label{
  width:auto;
  }
.label:hover{
  background:#ccc;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="label">click me</label>
<div class="shownumber">100</div>

Answer 1

这个问题是不明确的，你是想加 1 还是 100，但无论如何，你总是可以直接添加到文本值(转换为整数)。我通常反对对任何事情使用全局变量，因为它们无法扩展(即多个元素)。

text 允许您提供一个函数，该函数将返回元素的新文本​​:

$(".label").click(function () {
    $(".shownumber").text(function(){return ~~$(this).text() + 1}); // or 100!
});

注意:~~ 是从字符串到整数的方便(且快速)的快捷转换。

JSFiddle: https://jsfiddle.net/yuqr1p58/4/

通过这种方法，您可以使用某种形式的所有权安排来支持多个元素。该控件使用包含 div 和 closest 并支持任意数量的这些控件。使用全局变量这根本行不通。

JSFiddle: https://jsfiddle.net/yuqr1p58/5/