javascript - 更改选择框时计算价格变化

Question

我确信以前有人问过这个问题，但我找不到答案。

我正在尝试做什么:

• 更新价格字段 <p class="price">&pound;<span>50.00</span></p>当用户更改选择框时
• 有多个选择框可以协同工作以正确更新价格
• 如果所有选择框均采用原始值，则重置价格

注意:我对于更改 HTML 布局不太灵活。

这是我到目前为止所拥有的:

HTML

<p class="price">&pound;<span>50.00</span></p>

<select name="s1">
    <option value="1" data-price="0">Item 1</option>
    <option value="2" data-price="10.10">Item 2 + &pound;10.10</option>
    <option value="3" data-price="20.10">Item 3 + &pound;20.10</option>
    <option value="4" data-price="30.10">Item 4 + &pound;30.10</option>
</select>

<select name="s2">
    <option value="1" data-price="0">Item 1</option>
    <option value="2" data-price="10.10">Item 2 + &pound;10.10</option>
    <option value="3" data-price="20.10">Item 3 + &pound;20.10</option>
    <option value="4" data-price="30.10">Item 4 + &pound;30.10</option>
</select>

JQuery

var price = $('.price span').text();
$('.price').attr({'data-current': price, 'data-price': price})

$('select').change(function(){
    var $price = $('.price span');
    //var originPrice = parseFloat($('.price').attr('data-price'));
    var currentPrice = parseFloat($('.price').attr('data-current'));
    var addPrice = parseFloat($(this).children('option[value='+$(this).val()+']').attr('data-price'));
    var newPrice = '';

    if(isNaN(addPrice) || addPrice == 0){
        //reset
        var reset = $('.price').attr('data-price');
        $price.text(reset)
        $('.price').attr('data-current', reset)
    } 
    else {
        newPrice = currentPrice + addPrice;
        $price.text(parseFloat(newPrice).toFixed(2))
        $('.price').attr('data-current', newPrice)
    }

});

目前看起来相当困惑，我创建了这个作为默认 Eshop (Wordpress) 产品页面布局的测试。 Eshop 显示的价格和选择框类似于:

<option value="2" data-price="10.10">Item 2 + &pound;10.10</option>

我已经添加了所有data值，目前我的示例未完全正常工作，因为选择框相互覆盖，我不知道如何修复它。还有想法吗？

Here is the JsFiddle

谢谢。

Answer 1

假设我正确理解了问题，您希望将 select 元素中选择的值添加到初始价格中。如果是这种情况，您可以大大简化您的代码。试试这个:

$('.price-option').change(function(){
    var price = parseFloat($('.price').data('base-price'));

    $('.price-option').each(function(i, el) {
        price += parseFloat($('option:selected', el).data('price'));
    });

    $('.price span').text(price.toFixed(2));
}); 

Example fiddle