对于专注于网站或者前端研究很久的同学来说，电商网站应该是再熟悉不过。毕竟经常拿来练手，电商网站不管是后台还是前端设计制作，绝对是练手的不二选择
第一篇博客来个简单的电商网站常见的购物车商品数量加减，不要小看这个功能，对于刚入手js的同学，还是小有难度的
首先简单的html按钮及表单
<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>
给补充个小东西
原生js获取同级节点元素的方法：
先获取父节点对象
然后再获取父节点对象的子元素
这样就获取了包括原节点的所有同级节点元素
代码如下：
var outer=this.parentNode;
var inner=outer.children;
（不要诧异为啥是this，获取所点击节点本节点对象）
然后就是jq获取方法：
jq就简单多了，毕竟jq的诞生就是为了方便快捷，原理一样，只不过可以直接获取需要的某个通同级节点元素
代码如下：
var num = $(this).parent().children('.num');
然后的步骤就好说了
然后就是直接对相应的数值显示（商品数量）做加减
原生代码：
加：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类型
###结尾
别忘了给加个判断，不要让数值减到比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>
