Добавление двух динамически генерируемых 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. 
    } 
}) 

Answer 2

При нажатии на опцию «это» имеет либо experienceCost или collectionCost - создание ParseInt другого к сбою и общую стоимость стать NaN.

Проконсультируйтесь с наличием двух переменных вне функции и обновите их - или выберите выбор через правильный селектор вместо «this».