点击增加数量

Question

How to increasing 100 each time when I clicked ? Any mistake I have make ? Please tell me thanks

 $(".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

The question is ambiguous as to whether you want to add 1 or 100, but in any case, you can always add directly to the text value (converted to an integer). I am typically against using global vars for anything, as they do not scale (ie to multiple elements).

text allows you to supply a function, which will return the new text for the element:

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

Note: ~~ is a handy (and fast) shortcut conversion from string to integer.

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

With this approach you can support multiple elements, using some form of ownership arrangement. This one uses a containing div and closest and supports any number of these controls. This simply would not work using a global var.

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

Answer 2

You were in the right path, but you have to move var number = 100; outside the scope of click function like below. Also you have to use number += 100; , to increment by 100 , instead of number++ which just increment by 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> 

---

If you want to keep number++ you can multiply number by 100 before insterting in page ( .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

You just ned to move the var num outside the scope of the click .

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

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

    });
});

Answer 4

Try this.

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);

});

Demo 1

with single line of Code

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

Demo 2

Answer 6

   var number = 100;

$(".label").click(function () {

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

});