Jquery 函数不相加

Question

我的代码大部分都在工作，但是当我尝试在通风选择下将值加在一起时，我的数学没有被添加到最终总数中。它只是显示为文本。我有一个事件应该在选择值 3 时填充值。但是，只显示文本，没有计算任何值。

下面是我的代码。谢谢

<!-- Working Fiddle, need to add references to javascript/jquery etc. metadata with viewpoint and script name is called calculations.js http://jsfiddle.net/ehhqpybk/ -->
<div data-role="page" id="pageone">
    <div data-role="main" class="ui-content">

<h3>Products</h3>

        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <legend>Product</legend>
                <label for="product" class="select">Product</label>
                <select id="product" name="product" onchange="if (this.value) window.location.href=this.value">
                    <option id="select" value="None">Please Select Product</option>
                    <optgroup label=" Direct Vent Gas Fireplace">
                        <option id="DXV35_III" value="#pagetwo">DXV-35 DeepTimber Fire III</option>
                        <option id="DXV45_III" value="#pagethree">DXV-45 DeepTimber Fire III</option>
                    </optgroup>
                </select>
            </fieldset>
        </div>
<a href="#pagetwo">Go to Page Two</a>

    </div>
</div>
<!-- DXV-35 DeepTimber Fire III Direct Vent Fireplace Pricing -->
<div data-role="page" id="pagetwo">
    <div data-role="main" class="ui-content">
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <legend>Model</legend>
                <label for="1">Model</label>
                <select id="1" class="vars" name="DXV35_III">
                    <option value="None" data-price="0">Please Select Model</option>
                    <optgroup label="Millennia">
                        <option value="2" data-price="3799">Millennia Black</option>
                        <option value="2" data-price="3799">Millennia Classic Brass</option>
                        <option value="2" data-price="3799">Millennia Full Brass</option>
                    </optgroup>
                    <optgroup label="Wellington">
                        <option value="2" data-price="3999">Wellington</option>
                    </optgroup>
                    <optgroup label="Andover">
                        <option value="2" data-price="4399">Doors & Faceplate</option>
                    </optgroup>
                    <optgroup label="Prairie">
                        <option value="2" data-price="4399">Doors & Faceplate</option>
                        <!-- This will be added once I know what the following values will be <option value="2" data-price="Null">Antique Copper Overlay</option>
        <option value="2" data-price="Null">Gold Overlay</option>
        <option value="2" data-price="Null">Charcoal Overlay</option>
        <option value="2" data-price="Null">Pewter Overlay</option>
-->
                    </optgroup>
                    <optgroup label="Deerfield">
                        <option value="2" data-price="4099">Outside Fit Only</option>
                    </optgroup>
                    <optgroup label="Victoria">
                        <option value="2" data-price="3999">Black</option>
                        <option value="2" data-price="4199">Gold</option>
                    </optgroup>
                    <optgroup label="Tuscany">
                        <option value="2" data-price="4099">Black</option>
                        <option value="2" data-price="4199">Gold</option>
                    </optgroup>
                    <optgroup label="Bentley">
                        <option value="2" data-price="4499">Black Arch Screen Doors</option>
                        <option value="2" data-price="4499">Vintage Iron Arch Screen Doors</option>
                        <option value="2" data-price="4850">Gold Arch Screen Doors</option>
                        <option value="2" data-price="4699">Antique Copper Arch Screen Doors</option>
                        <option value="2" data-price="4699">Gun Metal Arch Screen Doors</option>
                        <option value="2" data-price="4699">Swedish Nickel Arch Screen Doors</option>
                    </optgroup>
                </select>
            </fieldset>
        </div>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <legend>Venting</legend>
                <label for="1">Venting</label>
                <select id="vent" class="vars" name="vent" onchange="if (this.value) = 3 window.location.href=" 15perft ">>
        <option value="2 " data-price="0 ">Select Venting</option>
        <optgroup label="Horizontal Venting ">
        <option value="2 " data-price="450 ">Wall Kit</option>
        <option value="2 " data-price="475 ">Corner Kit</option>
        <option data-price="499 " value="1 ">Up & Out Kit-Basement</option>
        </optgroup>
        <optgroup label ="Vertical Venting ">
        <option value="3 " data-price="305 ">Plus 15 per/ft and 45 per/elbow</option>
                <select id="15perft ">
                <option value="15 ">15 *1</option>
                <option value="30 ">15 *2</option>
        </optgroup>
        </select>
        </fieldset>
        </div>
<div data-role="fieldcontain ">
<fieldset data-role="controlgroup ">
<legend>Installation</legend>
<label for="install ">Installation</label>
        <select id ="install " class="vars " name="install ">
        <option value="2 " data-price="0 " >Select Installation</option>
        <option value="2 " data-price="499 ">Standard Installation</option>
        <option value="2 " data-price="900 ">Complete Installation (Full Tear Out)</option>
        <option value="2 " data-price="215 ">Gas Line Installation Plus 5 dollars per/ft</option>
        <option value="2 " data-price="250 ">Electric(no charge if electric available)</option>
        </select>

</fieldset>
</div>
<div data-role="fieldcontain ">
<fieldset>
        <label for="day ">Select Accessories</label>
        <select  id="accessories " name="accessories " class="vars " multiple="multiple " data-native-menu="false ">
          <option>Select Accessories</option>
          <option value="2 " data-price="70 " >LP Conversion Kit</option>
          <optgroup label="Remote ">
          <option value="2 " data-price="120 ">On-Off</option>
          <option value="2 " data-price="185 ">Multifunction </option>
          <option value="2 " data-price="350 ">Burngreen Kit</option>
          </optgroup>
          <optgroup label="Versi-Heat System ">
          <option value="2 " data-price="450 ">Heat System</option>
          <option value="2 " data-price="200 ">Installation</option>
          </optgroup>
        </select>
      </fieldset>
      </div>
       <a href="#pageone ">Go to Page One</a>
       <a href="#finalpage ">Final Total</a>
  </div>
</div>
<!-- 

DXV-35 DeepTimber Fire III Direct Vent Fireplace Pricing....................END................

-->
<!-- This is the final page output for final total of all items
    lines 154 thru 166
-->


<div data-role="page " id="finalpage ">
  <div data-role="main " class="ui-content ">
<div data-role="fieldcontain ">
<fieldset data-role="controlgroup ">
<legend>Final Price</legend>
<label for="item-price ">Final Price</label>
<div id="item-price "></div>
</fieldset>
</div>
 <a href="#pagetwo ">Back</a>
 <a href="#pageone ">Go to Page One</a>
  </div>
</div>
<!--

        End final page code

-->

脚本：

var basePrice = 0;

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

    $('.vars option:selected').each(function () {
        newPrice += $(this).data('price')
    });

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

http://jsfiddle.net/5tvbzjdr/

Answer 1

" + " plus 可以被视为连接运算符，最好是在使用任何算术运算之前 parseFloat 或 parseInt 值。

var basePrice = 0;

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

    $('.vars option:selected').each(function () {
        newPrice += parseFloat($(this).data('price'));
    });

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

Jquery 函数不相加

Jquery Function not adding together

html

jquery

function

jquery-mobile