Question

我确信之前已经提出过要求，但我无法找到答案。

我正在尝试做什么：

当用户更改选择框时更新价格字段<p class="price">£<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

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

1 个答案: