点击增加数量

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/

Answer 2

您的路径正确，但必须移动 var number = 100; 超出了以下click功能的范围 。 另外，您必须使用number += 100; ，以增加100 ，而不是number++ ，后者仅增加1。

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

 var number = 100; $(".label").click(function () { number += 100; $(".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> 

---

如果你想保持number++ ，你可以乘number由100页insterting之前（ .text(number*100)

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

 .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 3

您刚刚将var num移到click范围之外。

$(document).ready(function(){
  var number = 100;
$(".label").click(function() {

        number++;
        $(".shownumber").text(number);

    });
});

Answer 4

尝试这个。

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

                number += 100;
                $(".shownumber").text(number);

            });

https://jsfiddle.net/yuqr1p58/6/

Answer 5

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

});

演示1

单行代码

$(".label").click(function () {
    $(".shownumber").text( parseInt($(".shownumber").text())+100);
});

演示2

Answer 6

   var number = 100;

$（“。label”）。click（function（）{

    number += 100;
    $(".shownumber").text(number);

});