jQuery implements the addition and subtraction effect of shopping cart numbers_jquery

When we submit an order for online shopping, there is usually a quantity selection control on the webpage, which requires the buyer to select the number of items to purchase. The developer will make this control so that fine-tuning operations such as addition and subtraction can be performed by clicking. Of course, you can also directly enter the number of pieces. This article will introduce several common methods of using spinner digital spinners to implement digital addition and subtraction functions.

Add and subtract numbers left and right

For example, JD.com currently uses the effect of adding and subtracting numbers to the left and right when submitting orders. This effect is straightforward and easy to operate. We use the jquery.spinner.js plug-in to add and subtract numbers left and right. The calling method is very simple. Please see Demonstration Example 1.

Copy code The code is as follows:

The call is also very simple. First load the jquery library file and jquery.spinner.js, and then use the following code:

Copy code The code is as follows:

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

Bootstrap style, plus and minus on the right side

Bootstrap has been popular for a long time, and there are many kinds of applications based on bootstrap style. Let me introduce to you a digital addition and subtraction plug-in based on bootstrap, which can set the minimum value, maximum value, increment and decrement (step value), and Enter the numbers manually.

Copy code The code is as follows:

After loading the bootstrap related css and js files, you can directly see the page effect. If your project is based on bootstrap, you can call it directly. Please see demo example 2
You can also refer to the project address: https://github.com/xixilive/jquery-spinner to view relevant parameter settings.

jQuery ui style, addition and subtraction on the right side

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

Copy code The code is as follows:

If your project uses jquery ui, you can call jquery ui to implement the function of adding and subtracting numbers.

Copy code The code is as follows:

$("#spinner").spinner({
max:10,
Min:0,
Step:2
});

The above is all the content described in this article. I hope you will like it and it will help you master jQuery.