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

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()功能在跨度中显示此内容.

工作演示

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
});