jQuery adds and subtracts shopping cart Numbers

  • 2020-05-16 06:21:03
  • OfStack

When we submit orders in online shopping, there will be a selection of quantity control on the web page 1, asking the buyer to choose the number of items to buy, developers will make the control can be achieved by clicking the number of items such as add or subtract fine-tuning operations, of course, also can directly enter the number of items. This article describes several common ways to use the spinner digital spinner to add and subtract Numbers.

Left and right plus or minus

For example, jingdong 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. The method is very simple to invoke, as shown in example 1.


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

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


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

Bootstrap style, right side plus minus

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, maximum value, increasing and decreasing (step 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 css and js files, you can see the page effect directly, and if your project is based on bootstrap, you can call it directly. See demo example 2
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 minus

jQuery ui also provides the number addition and subtraction plug-in, which can set the minimum value, maximum value, increment and decrement (step value), and can manually enter the number. See demo example 3


<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 is all the content of this article, hope you can enjoy it, can help you master jQuery.


Related articles: