js根据显示的div获取所有productprice并相加
需要获取所有display不等于none的productprice的值并相加
以这个为例 $79.99 + $70.00 + $39.99 + $39.99 的金额就是$229.97
<div class="container"
id="finalform"
style="">
<div class="product-boxx"
id="product-laptop"
style="">
<p class="productprice">$79.99 USDp>
div>
<div class="product-boxx"
id="product-monitor"
style="display:none;">
<p class="productprice">$69.99 USDp>
div>
<div class="product-boxx"
id="product-lapmon"
style="display:none;">
<p class="productprice">$99.99 USDp>
div>
<div class="product-boxx"
id="product-monitor2"
style="display:none;">
<p class="productprice">$89.99 USDp>
div>
<div class="product-boxx"
id="product-light"
style="">
<p class="productprice">$70.00 USDp>
div>
<div class="product-boxx"
id="product-pad"
style="">
<p class="productprice">$39.99 USDp>
div>
<div class="product-boxx"
id="product-micro"
style="">
<p class="productprice">$39.99 USDp>
div>
div>
jQuery或原生js示例如下
<div class="container"
id="finalform"
style="">
<div class="product-boxx"
id="product-laptop"
style="">
<p class="producttitle">Laptop</p>
<p class="productprice">$79.99 USD</p>
</div>
<div class="product-boxx"
id="product-monitor"
style="display:none;">
<p class="producttitle">Monitor</p>
<p class="productprice">$69.99 USD</p>
</div>
<div class="product-boxx"
id="product-lapmon"
style="display:none;">
<p class="producttitle">Laptop</p>
<p class="productprice">$99.99 USD</p>
</div>
<div class="product-boxx"
id="product-monitor2"
style="display:none;">
<p class="producttitle">Laptop</p>
<p class="productprice">$89.99 USD</p>
</div>
<div class="product-boxx"
id="product-light"
style="">
<p class="producttitle">Laptop Light</p>
<p class="productprice">$70.00 USD</p>
</div>
<div class="product-boxx"
id="product-pad"
style="">
<p class="producttitle">Laptop pad</p>
<p class="productprice">$39.99 USD</p>
</div>
<div class="product-boxx"
id="product-micro"
style="">
<p class="producttitle">Laptop</p>
<p class="productprice">$39.99 USD</p>
</div>
<input type="number" id="finalprice">
</div>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
var sum = 0;
//jQuery
$('#finalform .product-boxx:visible p.productprice').each(function () {
sum += parseFloat(this.innerText.substring(1));
});
/*//原生JS
document.querySelectorAll('.product-boxx').forEach(item => {
if (item.style.display != 'none') {
sum += parseFloat(item.querySelector('p.productprice').innerText.substring(1));
}
})
*/
sum = sum.toFixed(2);//保留2位小数，防止浮点数计算精度丢失
alert(`总价为$${sum} USD`)
</script>
原生JavaScript
<script type="text/javascript">
let parentDiv = document.getElementById("finalform");
let childDivs = parentDiv.getElementsByClassName("product-boxx");
let total = 0;
for (let i = 0; i < childDivs.length; i++) {
let childDiv = childDivs[i];
if (childDiv.style.display != "none") {
let line = childDiv.children[0].innerText.trim();
total += Number(line.split("$")[1].split("USD")[0].trim())
}
}
total = total.toFixed(2);
console.log("$" + total);
</script>
原生的如下代码：
<script>
var sum=0;
document.querySelectorAll('.product-boxx').forEach(item => {
if (item.style.display != 'none') {
sum += parseFloat(item.querySelector('p.productprice').innerText.substring(1));
}
})
document.getElementById('finalprice').value=sum;//浮点数的计算会有点小BUG的，你自己应该也发现到了
</script>