关于原生js的商品数量增加或减少

最新推荐文章于 2022-05-20 18:43:51 发布

yuanjiejiea

最新推荐文章于 2022-05-20 18:43:51 发布

阅读量2.5k

点赞数 1

文章标签： js html

本文链接：https://blog.csdn.net/yuanjiejiea/article/details/81050345

版权

js代码首先获取每个元素，因为所有的li元素里的变化相同，所以遍历所有li加动态样式即可

对于合计里的东西而言，每个必须不同判断然后赋值，整体的代码情况如下

<script>
var aLi = document.getElementsByTagName("li");
var aStrong = document.getElementsByTagName("strong");
var aEm = document.getElementsByTagName("em");
var oP = document.getElementsByTagName("p")[0];
var aSpan = oP.getElementsByTagName("span");
var number = 0;
var price = 0;
for(var i=0;i<aLi.length;i++){
	Price(aLi[i]);
	}
function Price(obj){
	var aIn = obj.getElementsByTagName("input");
	var oStrong = obj.getElementsByTagName("strong")[0];
	var oEm = obj.getElementsByTagName("em")[0];
	var oSpan = obj.getElementsByTagName("span")[0];
	aIn[0].onclick = function(){
		if(oStrong.innerHTML>0){
			number--;
			oStrong.innerHTML--;
			price -= parseFloat(oEm.innerHTML);
			oSpan.innerHTML = parseFloat(oEm.innerHTML)*oStrong.innerHTML + "元";
			aSpan[0].innerHTML = number;
			aSpan[1].innerHTML = price;
			aSpan[2].innerHTML = getMax();
			}
		}
	aIn[1].onclick = function(){
			number++;
			oStrong.innerHTML++;
			price += parseFloat(oEm.innerHTML);
			oSpan.innerHTML = parseFloat(oEm.innerHTML)*oStrong.innerHTML + "元";
			aSpan[0].innerHTML = number;
			aSpan[1].innerHTML = price;
			aSpan[2].innerHTML = getMax();
			}
	}
	
function getMax(){
	var arr = [];
	for(var i=0;i<aStrong.length;i++){
		if(aStrong[i].innerHTML!=0){
			arr.push(parseFloat(aEm[i].innerHTML));
			}
		}
	return aStrong == 0 ? 0 : arr.sort(function(a,b){return b-a})[0];
	}
</script>

<body>
<ul id="list">
	<li>
  	<input type="button" value="-" />
    <strong>0</strong>
  	<input type="button" value="+" />
    单价：<em>12.5元</em>
    小计：<span>0元</span>
  </li>
	<li>
  	<input type="button" value="-" />
    <strong>0</strong>
  	<input type="button" value="+" />
    单价：<em>10.5元</em>
    小计：<span>0元</span>
  </li>
	<li>
  	<input type="button" value="-" />
    <strong>0</strong>
  	<input type="button" value="+" />
    单价：<em>8.5元</em>
    小计：<span>0元</span>
  </li>
	<li>
  	<input type="button" value="-" />
    <strong>0</strong>
  	<input type="button" value="+" />
    单价：<em>8元</em>
    小计：<span>0元</span>
  </li>
	<li>
  	<input type="button" value="-" />
    <strong>0</strong>
  	<input type="button" value="+" />
    单价：<em>14.5元</em>
    小计：<span>0元</span>
  </li>
</ul>

<p>
商品合计共：<span>0</span>件，共花费了：<span>0</span>元<br />
所购商品中最贵的商品单价是：<span>0</span>元
</p>