在同一个脚本文件中添加两个不同脚本中的两个变量(jquery)

时间:2015-01-22 09:36:57

标签: jquery html5 jquery-mobile add currency

我想在我的脚本中添加两个不同的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);

1 个答案:

答案 0 :(得分:0)

http://jsfiddle.net/9pa2kyda/5/

我在那里,我在最后一个脚本中更改了脚本的位置,因为它只是在“选择”上计算,它需要放在第二个计算脚本中。

如果用户运行设置我已将数字添加到一起,我只需要将最终总数转换为货币。

我有

“var finish_price = newPrice + total

    $("#MyEdit").html(finish_price.toFixed(2));
});"

我是否只是在第二个语句的末尾添加.currency?如果是这样我尝试过,我的脚本不起作用。添加变量togehter时是否有特殊的语法?