js根据显示的div获取所有productprice并相加

Question

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 USD</p>
    </div>
    <div class="product-boxx"
         id="product-monitor"
         style="display:none;">
        <p class="productprice">$69.99 USD</p>
    </div>
    <div class="product-boxx"
         id="product-lapmon"
         style="display:none;">
        <p class="productprice">$99.99 USD</p>
    </div>
    <div class="product-boxx"
         id="product-monitor2"
         style="display:none;">
        <p class="productprice">$89.99 USD</p>
    </div>
    <div class="product-boxx"
         id="product-light"
         style="">
        <p class="productprice">$70.00 USD</p>
    </div>
    <div class="product-boxx"
         id="product-pad"
         style="">
        <p class="productprice">$39.99 USD</p>
    </div>
    <div class="product-boxx"
         id="product-micro"
         style="">
        <p class="productprice">$39.99 USD</p>
    </div>

</div>

Answer 1

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>