jquery - 将两个动态生成的 HTML 值添加在一起

Question

第二次问这个问题，但这次提供了更多细节，提供了一个实例并提出了一个新问题。由于沟通不畅，第一个问题的答案与我的需求无关，我仍然需要帮助。

我正在创建一个定价界面，用户最终会选择两种产品(从 6 种产品中选择 - 混合搭配)，这将创建两种单独的价格(在本例中为一种体验价格和一种收藏价格)。然后我需要合并这些价格才能显示总价。体验和收藏价格的显示取决于用户所做的选择。

但是现在我不知道如何添加用户选择的两个 html 元素的 html 值。 total-cost 类是此附加值应显示的位置。我尝试了很多方法，希望自己能解决这个问题，但没有成功。

//FOR SELECTING EXPERIENCE AND COLLECTION PACKAGES

$('.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);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

Answer 1

您的问题出在您的click 事件中。 this 的范围缩小到作为事件目标的元素。我已经使用您的大象类来查找选定的元素，因此我首先移动了这一行:

$(this).addClass('elephant').siblings().removeClass('elephant');
var experienceCost = $('.elephant .cost1').html(),
    collectionCost = $('.elephant .cost2').html(),
    totalCost = parseInt(experienceCost, 10) + parseInt(collectionCost, 10);

更好的方法是使用全局变量。像(未经测试)的东西:

var experienceCost, collectionCost;
$(document).ready(function(){
    /* your code */

    //I've invented the class "pricing_column" to improve this selector
    $(document).on('click', '.pricing_column .flex_column', function() {
        $(this).addClass('elephant').siblings().removeClass('elephant');
        if ($(this).hasClass("pricing-experience"))
        {
            experienceCost = $(this).find('.cost1').html()
        }
        else
        {
            collectionCost = $(this).find('.cost2').html()
        }
        //etc.
    }
})