將兩個動態生成的HTML值與jQuery一起添加

我正在創建一個定價界面，最終會爲用戶（體驗+集合）生成兩個不同的價格。爲了顯示總價格，我需要結合這些價格。體驗和收藏價格根據用戶的選擇而顯示，並且他們目前的工作效果很好。將兩個動態生成的HTML值與jQuery一起添加

但現在我想不出如何添加兩個html元素的html值。類total-cost是應顯示此增加值的位置。我已經嘗試了很多東西，希望能夠自己搞清楚，但沒有運氣。

謝謝！與.cost1類和可變.cost2添加值，然後

每個格：

HTML（清理）

<div class="pricing-experience"> 

    <div class="flex_column"> 
     <span class="cost1">3000</span> 
    </div> 

    <div class="flex_column"> 
     <span class="cost1">4000</span> 
    </div> 

    <div class="flex_column"> 
     <span class="cost1">5000</span> 
    </div> 

</div> 


<div class="pricing-collection"> 

    <div class="flex_column"> 
     <span class="cost2">300</span> 
    </div> 

    <div class="flex_column"> 
     <span class="cost2">450</span> 
    </div> 

    <div class="flex_column"> 
     <span class="cost2">700</span> 
    </div> 

</div> 


<div class="experience-cost"> 
//cost1's value 
</div> 

<div class="collection-cost"> 
//cost2's value 
</div> 

<div class="total-cost"> 
//cost1 and cost2's added value 
</div>

jQuery的

$('.pricing-experience, .pricing-collection').on('click', '.flex_column', function() { 

    var experienceCost = $(this).find('.cost1').html(), 
     collectionCost = $(this).find('.cost2').html(); 

    $(this).addClass('elephant').siblings().removeClass('elephant'); 

    // console.log(experienceCost); 
    // console.log(collectionCost); 

    $('.experience-cost').html(experienceCost); 

    $('.collection-cost').html(collectionCost); 

    $('.total-cost').html(experienceCost + collectionCost); 

});

來源

2015-05-23 Delto

你可以顯示頁面的相關部分的HTML嗎？ –

您可以請發佈什麼experienceCost返回？ HTML？ – Mircea

@LelioFaieta我已經更新了HTML。 – Delto

試試這個將其顯示在div

012中個

JS：

$(".btn1").click(function() { 

var experienceCost = 0; 
var collectionCost = 0; 
var totalCost = 0; 
$('.cost1').each(function() { 
    experienceCost += parseFloat($(this).text()); 
}); 
$('.cost2').each(function() { 
    collectionCost += parseFloat($(this).text()); 
}); 

$('.experience-cost').text(experienceCost); 
$('.collection-cost').text(collectionCost); 
$('.total-cost').text(experienceCost + collectionCost); 
});

HTML：

<div class="pricing-experience"> 
<div class="flex_column"> <span class="cost1">3000</span> 

</div> 
<div class="flex_column"> <span class="cost1">4000</span> 

</div> 
<div class="flex_column"> <span class="cost1">5000</span> 

</div> 
</div> 
<div class="pricing-collection"> 
<div class="flex_column"> <span class="cost2">300</span> 

</div> 
<div class="flex_column"> <span class="cost2">450</span> 

</div> 
<div class="flex_column"> <span class="cost2">700</span> 

</div> 
</div> 
<div class="experience-cost"></div> 
<div class="collection-cost"></div> 
<div class="total-cost"></div> 
<button class="btn1">experienceCost</button>

Working Fiddle

來源

2015-05-23 12:42:44

你需要找出點擊匹配值：

var k=0, e=this; 
while (e = e.previousElementSibling) { ++k;}

這是一個粗略的演示：http://jsfiddle.net/y3Ls4zso/1/

如果我明白你想在這裏做什麼...

來源

2015-05-23 12:44:22 Mircea

將兩個動態生成的HTML值與jQuery一起添加

回答

相關問題