JQuery allows you to add or subtract the number of inputs for a shopping cart.

Provides various official and user-released code examples. For code reference, you are welcome to exchange your own code in the learning project. You can click the add or remove button to change the value in the input box, which is completely universal, there can also be multiple on one page, which can be used for shopping cart, you can set the maximum and minimum values, and each increase or decrease value, of course you can also do not set, I am a little white, please forgive me for the shortcomings
$ (Function (){
/**
* General
* Add one to the shopping cart
* Data-min is the minimum value, data-max is the maximum value, and data-step is the step size (1 by default, or not set, the step size is the value of "plus" or "minus" for each operation)
* Data-min and data-max are not limited.
* HTML:
*

*
*+
*-
*

* CSS:
*. Cart-number-box {position: relative ;}
*. Cart-number-box input {width: 60px; height: 27px; margin-left: 26px; text-align: center ;}
*. Cart-number-box input,
*. Cart-number-box. up,
*. Cart-number-box. down {border: 1px solid # aaa ;}
*. Cart-number-box. up,
*. Cart-number-box. down {position: absolute; display: block; width: 27px; height: 27px; top: 0; text-align: center; line-height: 23px; font-style: normal; cursor: pointer ;}
*. Cart-number-box. up {left: 85px ;}
*. Disabled {cursor: not-allowed; filter: alpha (opacity = 65);-webkit-box-shadow: none; opacity:. 65}
* DATE: 2015.8.3
*/
$ ('. Input-num-up'). click (function (){
UpDownOperation ($ (this ));
});

$ ('. Input-num-lower'). click (function (){
UpDownOperation ($ (this ));
});

Function upDownOperation (element)
{
Var _ input = element. parent (). find ('input '),
_ Value = _ input. val (),
_ Step = _ input. attr ('data-step') | 1;

// Check whether the elements of the current operation are disabled. If yes, remove the elements.
Element. hasClass ('Disabled ') & element. removeClass ('Disabled ');

// Check whether the element of the current operation is the Add button of the operation (. input-num-up). If yes, add the operation. If no, subtract the operation.
If (element. hasClass ('input-num-up '))
{
Var _ new_value = parseInt (parseFloat (_ value) + parseFloat (_ step )),
_ Max = _ input. attr ('data-max ') | false,
_ Down = element. parent (). find ('. input-num-low ');

// If the 'add' operation is executed and the 'delete' button has class = 'Disabled ', the class 'Disabled' of the 'delete' OPERATION button is removed'
_ Down. hasClass ('Disabled ') & _ down. removeClass ('Disabled ');
If (_ max & _ new_value >=_ max ){
_ New_value = _ max;
Element. addClass ('Disabled ');
}
} Else {
Var _ new_value = parseInt (parseFloat (_ value)-parseFloat (_ step )),
_ Min = _ input. attr ('data-min') | false,
_ Up = element. parent (). find ('. input-num-up ');

// If you perform the 'subtract 'operation and the 'add' button has class = 'Disabled', the class 'Disabled 'with the 'add' OPERATION button will be removed'
_ Up. hasClass ('Disabled ') & _ up. removeClass ('Disabled ');
If (_ min & _ new_value <= _ min ){
_ New_value = _ min;
Element. addClass ('Disabled ');
}
}
_ Input. val (_ new_value );
}
});

Input.up.down.zip (1.28 KB download: 85 times)

AD: truly free, domain name + VM + enterprise mailbox = 0 RMB