对于专注于网站或者前端研究很久的同学来说，电商网站应该是再熟悉不过。毕竟经常拿来练手，电商网站不管是后台还是前端设计制作，绝对是练手的不二选择第一篇博客来个简单的电商网站常见的购物车商品数量加减，不要小看这个功能，对于刚入手js的同学，还是小有难度的
1、首先简单的html按钮及表单
注意：
给补充个小东西原生js获取同级节点元素的方法： 先获取父节点对象 然后再获取父节点对象的子元素这样就获取了包括原节点的所有同级节点元素代码如下：
var outer=this.parentNode;var inner=outer.children;
（不要诧异为啥是this，获取所点击节点本节点对象）
然后就是jq获取方法：jq就简单多了，毕竟jq的诞生就是为了方便快捷，原理一样，只不过可以直接获取需要的某个通同级节点元素代码如下：
var num = $(this).parent().children('.num');
2、然后的步骤
然后的步骤就好说了然后就是直接对相应的数值显示（商品数量）做加减
原生代码：
加：inner[1].value++;
减：--inner[1].value;
加加减减最方便，直接转化为number类型做运算
jq代码：
加：num.val(num.val()*1+1);
减：num.val(num.val()*1-1);
“num.val()*1”是为了将string类型直接转化为number类型
3、 结尾
别忘了给加个判断，不要让数值减到比1还小。这个简单，不做过多描述。
源代码：
原生js实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车商品数量加减</title>
</head>
<body>
<div>
<input type="button" class="jian" value="-"/>
<input type="text" class="num" value="1"/>
<input type="button" class="jia" value="+"/>
</div>
<div>
<input type="button" class="jian" value="-"/>
<input type="text" class="num" value="1"/>
<input type="button" class="jia" value="+"/>
</div>
<div>
<input type="button" class="jian" value="-"/>
<input type="text" class="num" value="1"/>
<input type="button" class="jia" value="+"/>
</div>
<div>
<input type="button" class="jian" value="-"/>
<input type="text" class="num" value="1"/>
<input type="button" class="jia" value="+"/>
</div>
<div>
<input type="button" class="jian" value="-"/>
<input type="text" class="num" value="1"/>
<input type="button" class="jia" value="+"/>
</div>
<script>
var jia=document.getElementsByClassName('jia');
var jian=document.getElementsByClassName('jian');
for(i=0;i<jia.length;i++){
jia[i].onclick=function(){
var outer=this.parentNode;
var inner=outer.children;
inner[1].value++;
}
jian[i].onclick=function(){
var outer=this.parentNode;
var inner=outer.children;
if(inner[1].value>1){
--inner[1].value;
}
}
}
</script>
</body>
</html>
jq实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车商品数量加减</title>
<script src="./jquery-3.1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<input type="button" class="jian" value="-"/>
<input type="text" class="num" value="1"/>
<input type="button" class="jia" value="+"/>
</div>
<div>
<input type="button" class="jian" value="-"/>
<input type="text" class="num" value="1"/>
<input type="button" class="jia" value="+"/>
</div>
<div>
<input type="button" class="jian" value="-"/>
<input type="text" class="num" value="1"/>
<input type="button" class="jia" value="+"/>
</div>
<div>
<input type="button" class="jian" value="-"/>
<input type="text" class="num" value="1"/>
<input type="button" class="jia" value="+"/>
</div>
<div>
<input type="button" class="jian" value="-"/>
<input type="text" class="num" value="1"/>
<input type="button" class="jia" value="+"/>
</div>
<div>
<input type="button" class="jian" value="-"/>
<input type="text" class="num" value="1"/>
<input type="button" class="jia" value="+"/>
</div>
<script>
$(document).ready(function(){
$('.jian').click(function(){
var num = $(this).parent().children('.num');
if(num.val()>1)
num.val(num.val()*1-1);
});
$('.jia').click(function(){
var num = $(this).parent().children('.num');
num.val(num.val()*1+1);
});
})
</script>
</body>
网友评论