我想在我的脚本中添加两个不同的var(值),我目前有两个不同的输出1名为 div id =“item-price”,另一个名为 div id =“vent_total” 我想知道是否有办法从两个不同的脚本中添加两个不同的值,然后在达到最终总数后将这些数字解析为Currency函数。 下面我附上了Jsfiddle。我附加了我认为可能相关的代码(我最需要的猜测),它可以在我的脚本代码的第125-126行中找到。我已经看过这里并且没有找到办法做到这一点。可能我的措辞太冗长了。我将不胜感激任何帮助。如果我需要更具体,请告诉我。我已经在我的代码中添加了注释,如果有人想查看我的函数和html大纲,我可以将其设置为进行测试。
由于
http://jsfiddle.net/9pa2kyda/1/
<div data-role="page" id="page1">
<div data-role="main" class="ui-content">
<h1>Products</h1>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Options:</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="#page2">DXV-35 DeepTimber Fire III</option>
<option id="DXV45_III" value="#page3">DXV-45 DeepTimber Fire III</option>
<option id="DXV35" value="3">DXV-35 Timber Fire</option>
<option id="DXV42" value="4">DXV-42</option>
<option id="FV41" value="5">FV-41</option>
<option id="FV46" value="6">FV-46</option>
</optgroup>
<optgroup label="Direct Gas Inserts">
<option id="D30" value = "7">D-30</option>
<option id="D40" value="8">D-40</option>
<option id="FV33i" value="9">FV33i</option>
<option id="FV44i" value ="10">FV44i</option>
</optgroup>
</select>
</fieldset>
</div>
</div>
</div>
<!--
DXV-35 DeepTimber Fire III Direct Vent Fireplace Pricing
-->
<div data-role="page" id="page2">
<div data-role="main" class="ui-content">
<div data-role="fieldcontain">
<h1> Model Types</h1>
<fieldset data-role="controlgroup">
<legend>Model</legend>
<label for="1">Model</label>
<select id="1" class="vars" name="DXV35_III" onchange="if (this.value) window.location.href=this.value">
<option value="None" data-price="0">Please Select Model</option>
<optgroup label="Millennia">
<option value="#page3" data-price="3799">Millennia Black $3,799</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>
<!-- 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="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>
<input type="button" class="button_active" onclick="location.href='#page1';" value="Page 1" />
</div>
<div data-role="page" id="page3">
<div data-role="main" class="ui-content">
<h1> Venting</h1>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Venting</legend>
<label for="vent">Venting</label>
<select id ="vent" class="vars" name="cost_3_qty" onchange="if (this.value) window.location.href=this.value">
<option value="#page5" data-price="0">Select Venting</option>
<optgroup label="Horizontal Venting">
<option value="#page5" data-price="450">Wall Kit</option>
<option value="#page5" data-price="475">Corner Kit</option>
<option value="#page5" data-price="499" >Up & Out Kit-Basement</option>
</optgroup>
<optgroup label ="Vertical Venting">
<option value="#page4" data-price="305">Plus 15 per/ft and 45 per/elbow</option>
</optgroup>
</select>
</fieldset>
</div>
</div>
</div>
<!--
DXV-35 DeepTimber Fire III Direct Vent Fireplace Pricing....................END................
-->
<div data-role="page" id="page4">
<div data-role="main" class="ui-content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<form>
<h1>Vertical Venting Calculator</h1><br><br>
<label>Cost Per Foot<input type="text" name="cost_1" value="15.00" class="summable" readonly="readonly"/></label>
<label>QTY of Feet</label><select name="cost_1_qty">
<option value="0">Please Select Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
</select>
<br>
<label>Cost Per Elbow:<input type="text" name="cost_2" value="45.00" class="summable" readonly="readonly"/></label>
<label>QTY of Elbows: </label><select name="cost_2_qty">
<option value="0">Please Select Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</form>
</fieldset>
</div>
</div>
</div>
<div data-role="page" id="page5">
<div data-role="main" class="ui-content">
<div data-role="fieldcontain">
<h1>Installation</h1>
<fieldset data-role="controlgroup">
<legend>Options</legend>
<label for="install">Installation</label>
<select id ="install" class="vars" name="install">
<option value="#page6" 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>
</div>
<div data-role="page" id="page6">
<div data-role="main" class="ui-content">
<div data-role="fieldcontain">
<h1>Select Accessories</h1>
<fieldset data-role="controlgroup">
<legend>Options</legend>
<div data-role="fieldcontain">
<label for="accessories">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>
</div>
</fieldset>
</div>
</div>
</div>
<!-- This is the final page output for final total of all items
lines 154 thru 166
-->
<div data-role="page" id="page0">
<div data-role="main" class="ui-content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<h1>Final Price</h1>
<div id= "item-price"> </div>
<div id="vent_total">value from venting calulator page4>
</div>
</fieldset>
</div>
</div>
</div>
<!--
End final page code
-->
//**************************************************************
//Mobile Transitions Script
//**************************************************************
// (function($) {
// var methods = {
// init : function(options) {
// var settings = {
// callback: function() {}
// };
//
// if ( options ) {
// $.extend( settings, options );
// }
//
// $(":jqmData(role='page')").each(function() {
// $(this).bind("swiperight", function() {
// var nextPage = parseInt($(this).attr("id").split("page")[1]) - 1;
// if (nextPage === -1)
// nextPage = 6;
//
// $.mobile.changePage("#page"+nextPage, {
// transition: "pop",
// reverse: false
// });
// });
//
// $(this).bind("swipeleft", function() {
// var nextPage = parseInt($(this).attr("id").split("page")[1]) +1;
// if (nextPage === 7)
// nextPage = 0;
//
// $.mobile.changePage("#page"+nextPage, {
// transition: "pop",
// reverse: true
// });
// });
// })
// }
// }
//
// $.fn.initApp = function(method) {
// if ( methods[method] ) {
// return methods[method].apply(this, //Array.prototype.slice.call(arguments, 1));
// }
// else if ( typeof method === 'object' || ! method ) {
// return methods.init.apply( this, arguments );
// }
// else {
// $.error( 'Method ' + method + ' does not exist' );
// }
// }
// })(jQuery);
//$(document).ready(function(){
// $().initApp();
//});
//**************************************************************
//End Mobile Transitions Script
//**************************************************************
//**************************************************************
// Start Price Calculator Based on "vars" Class
//**************************************************************
var basePrice = 0;
$(".vars").change(function () {
newPrice = basePrice;
$('.vars option:selected').each(function () {
newPrice += $(this).data('price')
});
$('#item-price').html(newPrice.toFixed(2));
});
//**************************************************************
// End Price Calculator Based on "vars" Class
//**************************************************************
//**************************************************************
// Start Price Calculator Based on "summable" Class For Venting Calculator
// for <div data-role="page" id="page4">
//**************************************************************
function doTotal() {
var total = 0.0;
$(".summable").each(function (idx, element) {
$this = $(this);
var cost = parseFloat($this.val());
var qty_selector = '[name=' + $this.attr('name') + '_qty' + ']'; // eg: [name=cost_3_qty]
var qty = parseFloat($(qty_selector).val());
if (cost && qty) total += cost * qty;
});
$("#vent_total").html(total.toFixed(2));
}
$(document).ready(function () {
$("input[type=text]").blur(function (e) {
doTotal();
})
$('select').change(function () {
doTotal();
});
});
//**************************************************************
// End Price Calculator Based on "summable" Class For Venting Calculator
// for <div data-role="page" id="page4">
//**************************************************************
//**************************************************************
//BELOW IS THE CODE THAT I THINK I SHOULD USE TO COMBINE THE TWO PRICE OUTPUTS Lines 125 - 126
//**************************************************************
//
//var finish_price = total + newprice
//$("#MyEdit").html(finish_price.toFixed(2);
答案 0 :(得分:0)
http://jsfiddle.net/9pa2kyda/5/
我在那里,我在最后一个脚本中更改了脚本的位置,因为它只是在“选择”上计算,它需要放在第二个计算脚本中。
如果用户运行设置我已将数字添加到一起,我只需要将最终总数转换为货币。
我有
“var finish_price = newPrice + total
$("#MyEdit").html(finish_price.toFixed(2));
});"
我是否只是在第二个语句的末尾添加.currency?如果是这样我尝试过,我的脚本不起作用。添加变量togehter时是否有特殊的语法?