函数传参之商品价格计算—JS学习笔记2015-6-6（第50天）

经常我们可以看到很多网站会有多个相同功能的模块，比如淘宝首页的轮播，比如新浪首页的tab切换；

那么可以看出这些地方在HTML结构上是类似的，所以我们可以考虑用一块功能代码去实现，而不同是仅仅是传递参数的不同；

例如：

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 <title>J函数传参——商品价格计算</title>
  6 </head>
  7 
  8 <body>
  9 <ul id="list">
 10     <li>
 11       <input type="button" value="-" />
 12     <strong>0</strong>
 13       <input type="button" value="+" />
 14     单价：<em>12.5元</em>
 15     小计：<span>0元</span>
 16   </li>
 17     <li>
 18       <input type="button" value="-" />
 19     <strong>0</strong>
 20       <input type="button" value="+" />
 21     单价：<em>10.5元</em>
 22     小计：<span>0元</span>
 23   </li>
 24     <li>
 25       <input type="button" value="-" />
 26     <strong>0</strong>
 27       <input type="button" value="+" />
 28     单价：<em>8.5元</em>
 29     小计：<span>0元</span>
 30   </li>
 31     <li>
 32       <input type="button" value="-" />
 33     <strong>0</strong>
 34       <input type="button" value="+" />
 35     单价：<em>8元</em>
 36     小计：<span>0元</span>
 37   </li>
 38     <li>
 39       <input type="button" value="-" />
 40     <strong>0</strong>
 41       <input type="button" value="+" />
 42     单价：<em>14.5元</em>
 43     小计：<span>0元</span>
 44   </li>
 45 </ul>
 46 
 47 <p>
 48 商品合计共：<div id='cou'>0件</div>，共花费了：0元<br />
 49 其中最贵的商品单价是：0元
 50 </p>
 51 
 52 
 53 <script>
 54     var oUl = document.getElementById('list');
 55     var aLi = oUl.getElementsByTagName('li');
 56       
 57 
 58     // fn1(aLi[0]);
 59     // fn1(aLi[1]);
 60     // fn1(aLi[2]);
 61     // fn1(aLi[3]);  看到这种情形，应该想到使用for循环来实现
 62     for(var i=0; i<aLi.length; i++){
 63         fn1(aLi[i]);
 64     }
 65 
 66     function fn1(oLi){ //这里面使用，或者用其他参数a,b,c都可以，这个参数是自己命名的
 67 
 68         var aBtn = oLi.getElementsByTagName('input'); // 因为这里面有2个input，所以使用了aBtn,且后面没有加上相应的下标值； 
 69         var oStrong = oLi.getElementsByTagName('strong')[0];
 70         var oSpan = oLi.getElementsByTagName('span')[0];
 71         var oEm = oLi.getElementsByTagName('em')[0]; // 这里面加上[0]；是基于该父级元素下，只有这一个em标签
 72         var n1 = Number(oStrong.innerHTML); // "这里需要注意的是从HTML中获取的值都是字符串类型，为了后面的运算，以及避免产生不必要的问题，这里进行显示类型转换"
 73         var n2 = parseFloat(oEm.innerHTML);
 74 
 75         aBtn[0].onclick = function(){
 76             n1--;
 77             if(n1<=0){
 78                 n1=0;
 79             }
 80             oStrong.innerHTML = n1;
 81             oSpan.innerHTML = n1*n2+"元";
 82         };
 83         aBtn[1].onclick = function(){
 84             n1++;            
 85             oStrong.innerHTML = n1;
 86             oSpan.innerHTML = n1*n2+"元";
 87         };
 88     }
 89 
 90 // 下面是比较规范的命名：
 91 //     var oUl = document.getElementById('list');
 92 //     var aLi = oUl.getElementsByTagName('li');
 93     
 94 //     // fnCount ( aLi[0] );
 95 //     for ( var i=0; i<aLi.length; i++ ) {
 96 //         fnCount ( aLi[i] );
 97 //     }
 98     
 99 //     function fnCount ( li ) {  // 注意看这里的函数名命名
100 //         var aBtn = li.getElementsByTagName ('input');
101 //         var oStrong = li.getElementsByTagName ('strong')[0];
102 //         var oEm = li.getElementsByTagName ('em')[0];
103 //         var oSpan = li.getElementsByTagName ('span')[0];
104 //         var n = oStrong.innerHTML;            // 产品的数量
105 //         var price = parseFloat(oEm.innerHTML);            // 产品的单价命名
106         
107 //         aBtn[0].onclick = function () {
108 //             if ( n > 0 ) {
109 //                 n--;
110 //             }
111 //             oStrong.innerHTML = n;
112 //             oSpan.innerHTML = n*price + '元';
113 //         };
114 //         aBtn[1].onclick = function () {
115 //             n++;
116 //             oStrong.innerHTML = n;
117 //             oSpan.innerHTML = n*price + '元';
118 //         };
119 //     }
120 // };
121 
122 </script>
123 
124 </body>
125 </html>

View Code

今天这段自己敲的代码有2个收获：

第一：弄清除，参数的命名是自定的，也就是说这里面的oLi,也可以是其他自己起的名字，比如a，b，c都可以；

第二：动态获取元素的ByTagName方法，其实后面是否使用到下标，就看该HTML机构中，是否有多个相同的元素，比如这里面的按钮，就有2个，所以aBtn，a代表数组，不止一个，后面没有使用下标；

var aBtn = a.getElementsByTagName('input');

而其他该结构中只有一个的HTML元素，这里我们要调用它则直接使用下标了，比如这里的

var oStrong = a.getElementsByTagName('strong')[0];
var oSpan = a.getElementsByTagName('span')[0];
var oEm = a.getElementsByTagName('em')[0];

都是这种情况