javascript - 如何使用jQuery获取每个数据的总和?
问题描述
如下例所示,我想要每个产品价格的总和和所有销售的总和。在我想要最终金额Value1 * Value 2之后。
我已经尝试了每个循环,jQuery
但得到了任何解决方案。
var sum = 0;
jQuery('.data-single').each(function(){
var findProject = jQuery(this).find('.data-value').text().replace('$', '');
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
.wrapper{
max-width: 700px;
}
.set-column{
display: inline-block;
width: 100%;
vertical-align: top;
}
.set-column > div{
width: 33.33%;
float: left;
}
.data-single{
display: flex;
justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="data-list">
<div class="data-single set-column">
<div class="data-name">Product 1</div>
<div class="data-value">$45</div>
<div class="data-sell">1200 Sales</div>
</div>
<div class="data-single set-column">
<div class="data-name">Product 2</div>
<div class="data-value">$24</div>
<div class="data-sell">31 Sales</div>
</div>
<div class="data-single set-column">
<div class="data-name">Product 3</div>
<div class="data-value">$12</div>
<div class="data-sell">4 Sales</div>
</div>
<div class="data-single set-column">
<div class="data-name">Product 4</div>
<div class="data-value">$100</div>
<div class="data-sell">12 Sales</div>
</div>
</div>
<div class="set-column" style="font-weight: bold;">
<div class="total-price">
Final Amount - Value1 * Value2
</div>
<div class="total-sell">
Total Price - Value1
</div>
<div class="total-price">
Total Sell - Value2
</div>
</div>
</div>
解决方案
我为你解决了这个问题。你可以看到下面的代码:
var totalPrice = 0, totalSell = 0;
$('.data-value').each(function(index, elm){
const val = $(elm).text().replace('$', '')
totalPrice += parseInt(val)
});
$('.data-sell').each(function(index, elm){
const val = $(elm).text().replace(' Sales', '')
totalSell += parseInt(val)
});
$('.total-price').text(totalPrice)
$('.total-sell').text(totalSell)
$('.final-amount').text(totalPrice * totalSell)
.wrapper{
max-width: 700px;
}
.set-column{
display: inline-block;
width: 100%;
vertical-align: top;
}
.set-column > div{
width: 33.33%;
float: left;
}
.data-single{
display: flex;
justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="data-list">
<div class="data-single set-column">
<div class="data-name">Product 1</div>
<div class="data-value">$45</div>
<div class="data-sell">1200 Sales</div>
</div>
<div class="data-single set-column">
<div class="data-name">Product 2</div>
<div class="data-value">$24</div>
<div class="data-sell">31 Sales</div>
</div>
<div class="data-single set-column">
<div class="data-name">Product 3</div>
<div class="data-value">$12</div>
<div class="data-sell">4 Sales</div>
</div>
<div class="data-single set-column">
<div class="data-name">Product 4</div>
<div class="data-value">$100</div>
<div class="data-sell">12 Sales</div>
</div>
</div>
<div class="set-column" style="font-weight: bold;">
<div>
Final Amount - <span class="final-amount"> </span>
</div>
<div>
Total Price - $<span class="total-price"> </span>
</div>
<div>
Total Sell - <span class="total-sell"> </span>
</div>
</div>
</div>