Question

我有一个网上商店和产品，你可以有不同的变量，如下：

Colour: <select class="vars" name="size">
    <option>Select an option</option>
    <option data-price="-10.00" value="B">blue</option>
    <option data-price="+20.00" value="G">green</option>
    <option data-price="+30.00" value="Y">yellow</option>
</select>
<br>
Size: <select class="vars" name="size">
    <option>Select an option</option>
    <option data-price="-1.00" value="S">Small</option>
    <option data-price="+2.00" value="M">Medium</option>
    <option data-price="+3.00" value="L">Large</option>
</select>

根据产品的不同，可能有1到5种。

数据价格包含页面起始价格需要发生的事情。

因此，如果起始价格是10.00并且我选择黄色，则需要将<span class="item-price">10.00</span>的价格更新为40.00

但是如果我也选择小，那么它想再次更新为39。

我已经在下面的jsfiddle工作了一半，但是我坚持了两个部分。使用更新时的跨度更新价格，以及在进行更新时更新价格会使所有价格发生变化。

希望这是有道理的。

http://jsfiddle.net/gjbKY/5/

Answer 1

要计算总价，请获取两者的值，并在其中一个选项上更改值时将其添加到基本价格。您可以使用item-price功能在html()范围内显示此内容。

<强> Working Demo

<强> HTML

Colour: <select class="vars" name="size">
        <!-- set defaults to price=0 to save you from having to do validation -->
        <option data-price="0">Select an option</option> 
        <option data-price="-10.00" value="B">blue -10</option>
        <option data-price="20.00" value="G">green +20</option>
        <option data-price="30.00" value="Y">yello +30</option>
</select>
<br>
Size: <select class="vars" name="size">
        <option data-price="0">Select an option</option>
        <option data-price="-1.00" value="S">Small</option>
        <option data-price="2.00" value="M">Medium</option>
        <option data-price="3.00" value="L">Large</option>
</select>
<br>
<span id="item-price">20</span> <!-- better to use an ID than class, ID's are faster to look up -->

<强>的jQuery

var basePrice = 20;

$(".vars").change(function() {
    newPrice = basePrice;

    $('.vars option:selected').each(function() {
        newPrice += $(this).data('price'); //get price of each selected option and add them to the newPrice
    });

    $('#item-price').html(newPrice); //display new price
});

Jquery在选择一个或多个选项时更新价格

1 个答案: