JavaScript实现类似淘宝的购物车效果(3)

selectedViewList.onclick = function(e){ var el = e.srcElement; if(el.className == 'del'){ var index = el.getAttribute('index'); var input = tr[index].getElementsByTagName('input')[0]; input.checked = false; input.onclick(); } }

4）实现增减商品数量及小计价格的计算

//增减商品数量事件代理 for(var i=0;i<tr.length;i++){ tr[i].onclick = function(e){ e = e|| window.event; var el = e.srcElement; var cls = el.className; var input = this.getElementsByTagName('input')[1]; var val = parseInt(input.value); var reduce = this.getElementsByTagName('span')[1]; switch (cls){ case 'add': input.value = val + 1; reduce.innerHTML = '-'; getsubTotal(this); break; case 'reduce': if(val > 1){ input.value = val - 1; getsubTotal(this); }else{ reduce.innerHTML = ''; } } getTotal(); } tr[i].getElementsByTagName('input')[1].onkeyup = function(){ var val = parseInt(this.value); var tr = this.parentNode.parentNode;//this指的是当前的input，其父节点的父节点就是当前的tr var reduce = tr.getElementsByTagName('span')[1]; if(isNaN(val) || val < 1){ val = 1; } this.value = val;//保证输入框中都是大于1的纯数字 if(val <= 1){ reduce.innerHTML = ''; } else{ reduce.innerHTML = '-'; } getsubTotal(tr); getTotal(); } }

 5）实现删除商品功能

学会用for循环删除数组中的一些数据时要回置下标 i 。

//删除商品 deleteAll.onclick = function(){ if(selectedTotal.innerHTML != '0'){ var conf = confirm("确定要删除所选商品吗"); if(conf){ for(var i=0;i<tr.length;i++){ var input = tr[i].getElementsByTagName('input')[0]; if(input.checked){ tr[i].parentNode.removeChild(tr[i]); i --;//因为删除数组中的一个后，后面的索引就会向前移，此时要让i也向前移一个，回置下标i } } getTotal(); } } }

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章: