I used jQuery-Seat-Charts v1.1.1 to make a reservation web page. I have made it possible that when a person clicks a branch map, the div will change and become the seat reservation map of the branch ordered by the user. The point now is that although my div can be changed, the jquery in div, that is, the seat reservation map, cannot be displayed. Maybe it"s because I used the display:none method, so the id in the reservation image has not changed, and the result is that although there are different seat reservation maps in the three div, the id is the same. To put it simply, I actually copied and pasted it three times to + display:none;. To make it happen, that"s why something went wrong.
I am using some examples from the Internet
<body>
<div class="container">
<h2 class="title">jQuery()</h2>
<div class="demo clearfix">
<!-------->
<div id="seat_area">
<div class="front"></div>
</div>
<!-------->
<div class="booking_area">
:<span></span>
:<span>0320 22:15</span>
:
<ul id="seats_chose"></ul>
:<span id="tickects_num">0</span>
:<b><span id="total_price">0</span></b>
<input type="button" class="btn" value=""/>
<div id="legend"></div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.seat-charts.min.js"></script>
<script type="text/javascript">
var price = 100; //
$(document).ready(function() {
var $cart = $("-sharpseats_chose"), //
$tickects_num = $("-sharptickects_num"), //
$total_price = $("-sharptotal_price"); //
var sc = $("-sharpseat_area").seatCharts({
map: [// a ; "_"
"cccccccccc",
"cccccccccc",
"__________",
"cccccccc__",
"cccccccccc",
"cccccccccc",
"cccccccccc",
"cccccccccc",
"cccccccccc",
"cc__cc__cc"
],
naming: {//
top: false, //
getLabel: function(character, row, column) { //
return column;
}
},
legend: {//
node: $("-sharplegend"),
items: [
["c", "available", ""],
["c", "unavailable", ""]
]
},
click: function() {
if (this.status() == "available") { //
$("<li>" + (this.settings.row + 1) + "" + this.settings.label + "</li>")
.attr("id", "cart-item-" + this.settings.id)
.data("seatId", this.settings.id)
.appendTo($cart);
$tickects_num.text(sc.find("selected").length + 1); //
$total_price.text(getTotalPrice(sc) + price);//
return "selected";
} else if (this.status() == "selected") { //
$tickects_num.text(sc.find("selected").length - 1);//
$total_price.text(getTotalPrice(sc) - price);//
$("-sharpcart-item-" + this.settings.id).remove();//
return "available";
} else if (this.status() == "unavailable") { //
return "unavailable";
} else {
return this.style();
}
}
});
//
sc.get(["1_3", "1_4", "4_4", "4_5", "4_6", "4_7", "4_8"]).status("unavailable");
});
function getTotalPrice(sc) { //
var total = 0;
sc.find("selected").each(function() {
total += price;
});
return total;
}
</script>
</body>I only sent a reservation map for one of the branches. In fact, there are two of the same codes in the same web page.