1

我有一家网上商店，针对产品，您可以有不同的变量，如下所示：

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/

4

1 回答 1

5

要计算总价，请获取两者的值，并在其中一个选择的值发生更改时将它们添加到基本价格中。您可以使用该函数在item-price跨度中显示它。html()

工作演示

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
});
于 2013-06-26T15:34:10.537 回答