jQuery realizes the sum of number addition and subtraction effect

When we submit orders in online shopping, there will be a control to select the number of items on the web page, the buyer is required to choose the number of items to buy, developers will make the control can be click to achieve add or subtract and other fine-tuning operations, of course, also can directly enter the number of pieces.

plus or minus

For example, jd currently USES the effect of adding and subtracting Numbers when submitting orders, which is straightforward and easy to operate. We use the jquery.spinner.js plug-in to add and subtract Numbers left and right.
 

<input type="text" class="spinner"/> 

The call is also simple, loading the jquery library file and jquery.spinner.js, then using the following code:
 

 $('.spinner').spinner(); 

Bootstrap style, add or subtract

on the right

Bootstrap has been popular for a long time, and there are many kinds of applications based on bootstrap style. Here is a number addition and subtraction plug-in based on bootstrap. You can set the minimum value, the maximum value, the increasing and decreasing value (step size value), and you can enter the number manually.
 

<div class="input-group spinner" data-trigger="spinner" id="spinner"> 

    <input type="text" class="form-control" value="1" data-max="10" data-min="1" data-step="1"> 

    <div class="input-group-addon"> 

        <a href="javascript : ;" class="spin-up" data-spin="up"><i class="icon-sort-up"></i></a> 

        <a href="javascript : ;" class="spin-down" data-spin="down"><i class="icon-sort-down"></i></a> 

    </div> 

</div> 

 
After loading the bootstrap related css and js files, you can see the page effect directly. If your project is based on bootstrap, you can call it directly.

You can also refer to the address of the project: https: / / github com/xixilive/jquery - spinner view related parameters Settings.

jQuery ui style, right side plus or minus

jQuery ui also provides a number add and subtract plug-in, you can set the minimum value, the maximum value, the increment and the decrement (step value), you can enter the number manually.

<input type="text" id="spinner"/> 

If your project USES jquery ui, you can call jquery ui to add and subtract Numbers.

$("#spinner").spinner({ 

    max:10, 

    min:0, 

    step:2 

}); 

The above are the methods of number addition and subtraction of jQuery I used in the project. I sorted them out and Shared them with everyone. Although the function is relatively simple, it is very practical.