Jquery购物车增减商品数量模块
申申あ
帮助1人
首先看布局：
需要实现的功能：点击右边 的时候文本框中数量 1，点击左边-的时候文本框中数量-1，当减到0的时候就不能再减了，以免显示负数。
实现思路：
1.需要声明一个变量，这个变量的值为文本框中的值，作为初始值，点击 就让这个值 ，点击-就让这个值--，然后赋值给文本框。
2.注意1:只能增加本商品的数量，原因是因为如果不止上面一个模块，而是很多个这个模块获取文本框中的值可能会获取到其他模块中文本框的值，所以取的值是当前 （-）号的兄弟文本框（itxt）的值。
3.修改表单的值是采用val()方法。
完整代码如下（如有不懂的地方请看代码注释）：
-
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<script src="../js/jquery.min.js"></script>
-
<title>数量添加</title>
-
<style>
-
* {
-
margin: 0;
-
padding: 0;
-
}
-
-
.change {
-
margin-top: 200px;
-
margin-left: 200px;
-
}
-
-
.change a {
-
float: left;
-
text-decoration: none;
-
color: #ccc;
-
width: 20px;
-
height: 25px;
-
border: 1px solid #cacbcb;
-
text-align: center;
-
line-height: 25px;
-
}
-
-
.change input {
-
float: left;
-
height: 25px;
-
width: 50px;
-
border: 1px solid #ccc;
-
border-left: 0;
-
border-right: 0;
-
outline: none;
-
text-align: center;
-
}
-
</style>
-
</head>
-
-
<body>
-
<script>
-
$(function() {
-
// 1.声明一个变量，点击 时让这个值 ，然后赋值给文本框
-
// 点击 就进行 然后赋值给文本框
-
$('.increment').click(function() {
-
// 获取文本框里面的数字
-
var num = $(this).siblings('.itxt').val();
-
console.log(num);
-
num ;
-
$(this).siblings('.itxt').val(num)
-
})
-
// 点击-就进行--然后赋值给文本框
-
$('.decrement').click(function() {
-
// 获取文本框里面的数字
-
// 获取文本框里面的数字
-
var num = $(this).siblings('.itxt').val();
-
num--;
-
// 不能再减
-
if (num === 0) {
-
return false
-
}
-
$(this).siblings('.itxt').val(num)
-
})
-
})
-
</script>
-
<div class="change">
-
<a href="javascript:;" class="decrement">-</a>
-
<input type="text" value="1" class="itxt">
-
<a href="javascript:;" class="increment"> </a>
-
</div>
-
</body>
-
-
</html>
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhgbgkgi
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01
