Question

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

我正在创建一个定价界面，最终会在用户选择两个产品（从6个混合和匹配中选择）中产生，这将产生两个单独的价格（在这种情况下一个体验价格和一个收集价格）。然后我需要结合这些价格才能显示总价。根据用户选择的选项显示体验和收集价格。

但现在我无法弄清楚如何添加用户选择的两个html元素的html值。类total-cost是应显示此附加值的位置。我已经尝试过很多东西，希望自己搞清楚，但没有运气。

＆＃13;

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

＆＃13;

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

＆＃13;

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.
    }
})

Answer 2

当你点击一个选项＆＃34; this＆＃34;有经验成本或集合成本 - 使另一成员的parseInt失败，总成本变为NaN。

建议在函数外部使用两个变量并更新它们 - 或者通过适当的选择器访问选择而不是＆＃34;这个＆＃34;。

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

2 个答案: