【jquery】实现购物车加减
分析：
1.点击“+”或者“-”时当前兄弟文本框中的数值变化
2.文本框最小值为1，所以点击“-”时需要进行判断
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="jquery-1.6.2.min.js"></script><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><style>body {margin: 0px;padding: 0px;}.p-num1,.p-num2 {width: 170px;margin: 20px;}a {color: #666;text-decoration: none;}a:hover {color: #e33333;}.decrement,.increment {float: left;border: 1px solid #cacbcb;height: 18px;line-height: 18px;padding: 1px 0;width: 16px;text-align: center;color: #666;margin: 0;background: #fff;margin-left: -1px;}.itxt {float: left;border: 1px solid #cacbcb;width: 42px;height: 18px;line-height: 18px;text-align: center;padding: 1px;margin: 0;margin-left: -1px;font-size: 12px;font-family: verdana;color: #333;-webkit-appearance: none;}.p-sum {font-weight: 700;width: 145px;}.p-num {display: flex;flex-direction: column;}</style>
</head><body><div class="p-num"><div class="p-num1"><div class="quantity-form"><a href="javascript:;" class="decrement">-</a><input type="text" class="itxt" value="1"><a href="javascript:;" class="increment">+</a></div></div><div class="p-num2"><div class="quantity-form"><a href="javascript:;" class="decrement">-</a><input type="text" class="itxt" value="1"><a href="javascript:;" class="increment">+</a></div></div></div><script>$(".increment").click(function () {//得到当前兄弟文本框的值var n = $(this).siblings(".itxt").val();n++;$(this).siblings(".itxt").val(n);})$(".decrement").click(function(){//得到当前兄弟文本框的值var n=$(this).siblings(".itxt").val();//当文本框的值减到1时就不再执行n--及后面的代码if(n==1){return false;}n--;$(this).siblings(".itxt").val(n);})</script>
</body></html>
效果：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！