一个类似购物车中商品数量加一减一的功能

　　前两天同学叫帮忙实现一个类似购物车中商品数量加一减一的功能，由于她的代码中没有实现行为和结构的分离，她用的是在标签中绑定onclick事件来实现的，后来我也就没改，直接把她的两个函数实现就ok了，不过后来我又重新实现了一个行为与结构分离的方法。

　　其HTMl代码示例如下：

 1 <div>
 2     <input type="button"  value="-" / >
 3      <input type="text" value="12" class="test" />
 4      <input type="button" value="+"  />
 5 </div>
 6 <div>
 7     <input type="button"  value="-" />
 8      <input type="text" value="2" class="test" />
 9       <input type="button" value="+" />
10 </div>

View Code

　　由于有很多的这样的div所以如果每个的加事件代码就非常冗余，所以就想通过获取显示件数的文本框，然后给他的前后节点绑定点击事件。由于设置的是class，很多浏览器不支持getElementByClassName，所以就从网上看到了一个方法，代码如下：

 1 function getClass(tagName,classStr){
 2         if (document.getElementsByClassName) {//支持getElementsByClassName
 3             return document.getElementsByClassName(classStr);
 4         } else{//不支持
 5             var nodes = document.getElementsByTagName(tagName);
 6             var ret = [];
 7             for (var i = 0; i < nodes.length; i++) {
 8                 if (hasClaa(nodes[i],classStr)) {//含有多个class时，判断是否在里面含有
 9                     ret.push(nodes[i]);
10                 }
11             };
12             return ret;
13         };
14         function hasClass(tagStr,classStr){
15             var arr = tagStr.className.split(/\s+/);
16             for (var i = 0; i < arr.length; i++) {
17                 if (arr[i] == classStr) {
18                     return true;
19                 }
20 
21             }
22         return false;
23         }
24 
25     }

View Code

　　获取到class="test"的input对象后，就是获取他的前后节点，并绑定点击事件，在绑定点击事件要考虑兼容问题，代码如下：

 1 function getBorderNode(str){
 2         var objStr = getClass('*',str);
 3         
 4         for (var i = 0; i < objStr.length; i++) {
 5             
 6             var objNext = objStr[i].nextSibling;//下一个节点
 7 
 8             while (objNext.nodeType!=1)
 9             {
10                     objNext=objNext.nextSibling;
11             }
12             var objFront = objStr[i].previousSibling;//上一个节点
13             while (objFront.nodeType!=1)
14             {
15                     objFront=objFront.previousSibling;
16             }
17             addEvent(objNext,'click',calculation,objNext);
18             addEvent(objFront,'click',calculation,objFront);
19         };
20         
21     }
22     function addEvent(obj,ev,fun,param){
23         var fn = fun;
24         if(param){
25             fn = function(e){
26                 fun.call(this, param);  //继承监听函数,并传入参数以初始化;
27             }
28         }
29         if(obj.attachEvent){
30             obj.attachEvent('on'+ev,fn);
31         }
32         else if(obj.addEventListener){
33             obj.addEventListener(ev,fn,false);
34         }
35         else{
36             obj["on" + eventName] = fn;
37         }
38     }

View Code

　　最后就是计算部分了，在上面的addEvent中他的函数参数可以添加参数，多以我写了一个计算函数实现加减功能，代码如下：

 1 function calculation(obj){            
 2         if(obj.value == '+'){
 3             //obj.onclick = function(){
 4                 //console.log(obj);
 5                 var  oText = obj.previousSibling;
 6                 while (oText.nodeType!=1)
 7                 {
 8                         oText=oText.previousSibling;
 9                 }
10                 console.log(oText);
11                 oText.value = parseInt(oText.value) + 1;
12 
13             //}
14         }
15         else if(obj.value == '-'){
16             //obj.onclick = function(){
17                 var  oText = obj.nextSibling;
18                 while (oText.nodeType!=1)
19                 {
20                         oText=oText.nextSibling;
21                 }
22                 if (parseInt(oText.value) > 1) {
23                     oText.value = parseInt(oText.value) -1;
24                 } else{
25                     //不能减了
26                 };
27             //}
28         }
29         else{
30             //其他种类
31         }
32     }

View Code

然后调用一下getBorderNode('test');就可以了。

　

转载于:https://www.cnblogs.com/Jing-w/p/3662439.html