极客观点
项目管理
HarmonyOS
我用了jQuery-Seat-Charts v1.1.1 做了个预定位子的网页， 我已经做到当人点一个分行图时时这个div会改变， 变成用户所点的分行的位子预定图，现在的重点是虽然我这个div我已经可以做到改变了但是div里的jquery 也就是那个座位预定图却无法显示，可能是因为我用了display：none的方式所以预定图里的id都没有改变结果就成了3个div里虽然有着不同的位子预定图但是id却是相同的， 简单来说就是其实我是复制粘帖了三次来+display：none；来实现的所以才出了问题。
我用的是网上的一些例子
<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">
<p>电影：<span>天将雄师</span></p>
<p>时间：<span>03月20日 22:15</span></p>
<p>座位：</p>
<ul id="seats_chose"></ul>
<p>票数：<span id="tickects_num">0</span></p>
<p>总价：<b>￥<span id="total_price">0</span></b></p>
<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 = $('#seats_chose'), //座位区
$tickects_num = $('#tickects_num'), //票数
$total_price = $('#total_price'); //票价总额
var sc = $('#seat_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: $('#legend'),
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);//更新票价总金额
$('#cart-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>这我只发了其中一个分行的位子预定图，其实一样的代码还有两个在同一个网页里。。
这个啊 声明个全局变量,获取到map的时候,赋值给这个全局变量就行了