如何根据从不同选项卡中选择的项目添加总成本

Question

我有两个标签，一个显示一个位置的一些酒店名称，另一个标签显示另一个位置的一些酒店。

当我从一个选项卡中选择一家酒店，然后从另一个选项卡中选择另一家酒店时。总数应该是hotel_location1 + hotel_location2。

这是我的代码：

标签：

<div class="tabs-x tabs-left">
<ul id="myTab-kv-13" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#hotel-pb" role="tab" data-toggle="tab"><i class="fa fa-bed"></i> Port Blair</a></li>
<li><a href="#hotel-hl" role="tab-kv" data-toggle="tab"><i class="fa fa-bed"></i> Havelock</a></li>
</ul>
<div id="myTabContent-kv-13" class="tab-content">
<div class="tab-pane fade in active" id="hotel-pb">
<div class="col-md-3 col-xs-6">
<div class="panel panel-red">
<div class="panel-heading">velocity</div>
<div class="panel-body">
<img src="images/hotels/velocity.png" class="img-responsive"/>
<div class="my-caption">
<span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span></div>
<select name="hotel_cat" id="hotel_cat_1" class="form-control" onchange="hotel_rate()">
<option value="">Category</option>
<option value="Standard Rs: 2000">Standard Rs: 2000</option>
<option value="Deluxe Rs: 2200">Deluxe Rs: 2200</option>
<option value="Family Rs: 3000">Family Rs: 3000</option>
</select>
<input type="hidden" name="sel_cat_1" id="sel_cat_1"/>
<br />
<button class="btn btn-block btn-danger" name="add_this_1" id="add_this_1" data-hname="velocity" data-elem="1" onclick="total_rate()">Select</button>
<input type="hidden" name="em_1" id="em_1" value="800"/>
<input type="hidden" name="s_tax_1" id="s_tax_1" value="8.4"/>
</div>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="panel panel-red">
<div class="panel-heading">White Coral</div>
<div class="panel-body">
<img src="images/hotels/White Coral.png" class="img-responsive"/>
<div class="my-caption">
<span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span></div>
<select name="hotel_cat" id="hotel_cat_2" class="form-control" onchange="hotel_rate()">
<option value="">Category</option>
<option value="Dlx Lake View Rs: 4500">Dlx Lake View Rs: 4500</option>
<option value="Dlx Mountain View Rs: 4000">Dlx Mountain View Rs: 4000</option>
<option value="Std Lake View Rs: 3500">Std Lake View Rs: 3500</option>
<option value="Std Mountain View Rs: 3000">Std Mountain View Rs: 3000</option>
</select>
<input type="hidden" name="sel_cat_2" id="sel_cat_2"/>
<br />
<button class="btn btn-block btn-danger" name="add_this_2" id="add_this_2" data-hname="White Coral" data-elem="2" onclick="total_rate()">Select</button>
<input type="hidden" name="em_2" id="em_2" value="800"/>
<input type="hidden" name="s_tax_2" id="s_tax_2" value="8.4"/>
</div>
</div>
</div>
<input  type="hidden" name="count" id="count" value="3"/>
</div>

<div class="tab-pane fade" id="hotel-hl">
<div class="col-md-3 col-xs-6">
<div class="panel panel-red">
<div class="panel-heading">blue bird resort</div>
<div class="panel-body">
<img src="images/hotels/blue bird resort.png" class="img-responsive"/>
<div class="my-caption">
<span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span></div>
<select name="hotel_cat" id="hotel_cat" class="form-control" onchange="hotel_rate()">
<option value="">Category</option>
<option value="Standard Rs: 2000">Standard Rs: 2000</option>
</select>
<input type="hidden" name="sel_cat_3" id="sel_cat_3"/>
<br />
<button class="btn btn-block btn-danger" name="add_this_3" id="add_this_3" data-hname="blue bird resort" data-elem="3" onclick="total_rate()">Select</button>
<input type="hidden" name="em_3" id="em_3" value="800"/>
<input type="hidden" name="s_tax_3" id="s_tax_3" value="8.4"/>
</div>
</div>
</div>
</div>
</div>
</div>

脚本：用于hotel_rate()

function hotel_rate(){ // just define the function.
	jQuery(document).ready(function($){
	    var i=1;
	    var cnt = $("#count").val();
	    for(i=1;i<cnt;i++){
			var cost_em = $("#em_"+i).val();
	        var cat = $("#hotel_cat_"+i).val();
	        var test = cat.split(':'); 
	        var cat_cost = parseInt(test[1]);
	        $("#sel_cat_"+i).val(cat_cost);
			$('.btn-active').removeClass('btn-success btn-active').addClass('btn-danger').html('Select');
		 	
		}
			
	});
	}

脚本：total_cost()

function total_rate(){
	jQuery(document).ready(function($){
		
		 var button = $(event.target);
		 $('.btn').removeClass('btn-success btn-active').addClass('btn-danger').html('Select');
		
		 button.html('Selected');
		 button.removeClass("btn-danger");
         button.addClass("btn-success btn-active");
		 
  		
			var elem = button.data('elem');
			var hname = button.data('hname');
		 	var s_tax = $("#s_tax_"+elem).val();
			var cost_em = $("#em_"+elem).val();
	        var cat_cost = $("#sel_cat_"+elem).val();
			var rooms = $("#rooms").val();
			var per = $('#persons').val();
			var mattress = per - (rooms*2);
			var cost_hotel = parseInt((cat_cost * rooms) + (cost_em * mattress));
			var cost_hotel_final = parseInt(cost_hotel + (s_tax/100 * cost_hotel));
			$("#tot_hotel_cost").val(cost_hotel_final);
			$("#hotels").html(hname);
			total();
	 });
	}

脚本：添加所有数据的其余部分。

function total_transport(){
	jQuery(document).ready(function($){
			var trans_pb = $("#t_pb").val();
			var trans_hl = $("#t_hl").val();
			var trans_nl = $("#t_nl").val();
			var total_transportation_cost = trans_pb + trans_hl + trans_nl;
			$("#tot_transp").val(total_transportation_cost);
			total();
	});
	}
	function total(){
	jQuery(document).ready(function($){
			var tot_hotel_cost = $("#tot_hotel_cost").val();
			var tot_transp = $("#tot_transp").val();
			var total_final_cost = tot_transp + tot_hotel_cost;
			$("#total_cost").html(total_final_cost);
			
	});
	}

我的错误是我无法根据不同的标签（即不同的位置）添加酒店价格。

我们将不胜感激任何类型的帮助。提前谢谢。

Answer 1

根据我的理解，您可以尝试 2 个选项。

• 使用对象来存储值。
• 动态地从元素中获取值。

下面是JSFiddle 模拟这两个选项。

代码

// Global Object to store values.
// Update value on every stage.
var user = {
    firstName:'',
    lastName:'',
    age:''
}

function onTheFly(){
	var _fname = $("#txtFirstName").val();
    var _lname = $("#txtLastName").val();
    var _age = $("#txtAge").val();
    
    $("#lblOnTheFly").text(_fname + " " + _lname + " is " + _age + " years old.")
}

// Navigate UI
function next(id){
	$(".tab-content").slideUp();;
    $("#"+id).slideDown();
    
    switch(id){
        case "tab2":
            user.firstName = $("#txtFirstName").val();
            break;
            case "tab3":
            user.lastName = $("#txtLastName").val();
            break;
            case "tab4":
            user.age = $("#txtAge").val();
            $("#lblSummary").text(user.firstName + " " + user.lastName + " is " + user.age + "years old");
            break;
    }
}

body {
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
font-size: 14px;        
}

.tabs-menu {
    height: 30px;
    float: left;
    clear: both;
}

.tabs-menu li {
    height: 30px;
    line-height: 30px;
    float: left;
    margin-right: 10px;
    background-color: #ccc;
    border-top: 1px solid #d4d4d1;
    border-right: 1px solid #d4d4d1;
    border-left: 1px solid #d4d4d1;
}

.tabs-menu li.current {
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid #fff;
    z-index: 5;
}

.tabs-menu li a {
    padding: 10px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none; 
}

.tabs-menu .current a {
    color: #2e7da3;
}

.tab {
    border: 1px solid #d4d4d1;
    background-color: #fff;
    float: left;
    margin-bottom: 20px;
    width: auto;
}

.tab-content {
    width: 660px;
    padding: 20px;
    display: none;
}

#tab1 {
 display: block;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tabs-container">
    <div class="tab">
        <div id="tab1" class="tab-content">
            Enter First Name: <input type="text" id="txtFirstName" />
            <button onclick="next('tab2')">Next</button>
        </div>
        <div id="tab2" class="tab-content">
            Enter Last Name: <input type="text" id="txtLastName" />
            <button onclick="next('tab3')">Next</button>
        </div>
        <div id="tab3" class="tab-content">
            Enter Age: <input type="text" id="txtAge" />
            <button onclick="next('tab4')">Next</button>
        </div>
        <div id="tab4" class="tab-content">
            <h1>Summary</h1>
            <p id="lblSummary"></p>
            
            <button onclick="onTheFly()">Generate Summary</button>
            <p id="lblOnTheFly"></p>
        </div>
    </div>
</div>