将两个动态生成的HTML值与jQuery一起添加 [英] Adding two dynamically generated HTML values together with jQuery

问题描述

我正在创建一个定价界面，该界面最终将为用户产生两种不同的价格(体验+费用).然后，我需要将这些价格结合起来以显示总价.体验和收藏价格的显示取决于用户的选择，并且它们目前效果很好.

I am creating a pricing interface that will ultimately yield two different prices for the user (experience + collection). I will need to then combine these prices in order to display a total price. The experience and collection prices are being displayed depending on the selections the user makes, and they currently work great.

但是现在我不知道如何添加两个html元素的html值.类别total-cost是应显示此附加值的位置.我已经尝试了很多事情，希望自己弄清楚，但是没有运气.

But now I can't figure out how to add the html values of the two html elements. The class total-cost is where this added value should display. I've tried quite a few things in hopes of figuring it out myself, but no luck.

谢谢！

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);

});

推荐答案

您需要在单击时找到匹配的值:

You need to find the matching values on click:

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

这是一个粗略的演示: http://jsfiddle.net/y3Ls4zso/1/

Here is a rough demo: http://jsfiddle.net/y3Ls4zso/1/

如果我了解您要在这里做什么...

If I understood what you want to do here...

这篇关于将两个动态生成的HTML值与jQuery一起添加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！