我有两个标签，一个显示一个位置的酒店名称，另一个标签显示另一个位置的一些酒店。
当我从一个标签中选择一个酒店，然后从另一个标签中选择另一个酒店。总数应为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);
});
}
我的错误是我无法根据不同的标签添加酒店房价，即不同的位置。
任何类型的帮助将不胜感激。 thnx提前。
答案 0 :(得分：0)
根据我的理解，您可以尝试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>