js实现购物车商品数量加减

  更新时间：2020年09月21日 09:36:16 作者：以後123

  这篇文章主要为大家详细介绍了js实现购物车商品数量加减css购物车数量加减按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  本文实例为大家分享了js实现购物车商品数量加减的具体代码css购物车数量加减按钮，供大家参考，具体内容如下

  Html

  <pre class="brush:xhtml;">

 -
 
 +

</pre>

  CSS

  <pre class="brush:css;">

.list a {
display: block;
margin: 30px;
padding: 0 20px;
height: 100px;
}
.list .list-img {
width: 180px;
height: 100px;
border-radius: 6px;
object-fit: cover;
}
.list .title {
font-size: 16px;
font-weight: bold;
white-space: nowrap;
text-overflow: ellipsis;
margin: 10px 0 0;
}
.list .content {
font-size: 14px;
line-height: 26px;
margin: 10px 0 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
</pre>

  Js

  <pre class="brush:js;">

var num = 0;
// 对表单进行初始赋值
$('#exampleInputAmount').val(num);
// 点击添加时
function add() {
// 方法体
if (num >= 5) {

alert('最多可添加5个');
return;

}
num++;
console.log(num);
$('#exampleInputAmount').val(num);
}
// 点击删除时
function minus() {
if (num < 1) {

alert('已减到最低了');
return;

}
num--;
console.log(num);
$('#exampleInputAmount').val(num);
}
</pre>

  以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。