jquery 座位选择
时间: 2023-08-30 15:09:51 浏览: 51
jQuery 座位选择插件可以让用户在座位图中选择座位。可以使用以下步骤来实现:
1. 在 HTML 中创建一个座位图容器。
2. 在 JavaScript 中加载 jQuery 库和座位选择插件。
3. 使用 jQuery 座位选择插件配置座位图容器,包括设置座位数量、排数、座位样式等。
4. 在座位图容器中添加座位元素,为每个座位添加一个唯一的 ID。
5. 使用 jQuery 座位选择插件的 API 来获取选中的座位。
以下是一个简单的示例代码:
HTML:
```
<div id="seat-map"></div>
```
JavaScript:
```javascript
// 加载 jQuery 库和座位选择插件
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-seat-charts/1.0.6/jquery.seat-charts.min.js"></script>
// 配置座位图容器
$('#seat-map').seatCharts({
map: [
'aaaaaaaaaa',
'aaaaaaaaaa',
'__________',
'aaaaaaaa__',
'aaaaaaaaaa',
'aaaaaaaaaa',
],
seats: {
a: {
price: 10,
classes: 'seat'
}
},
naming: {
top: false,
getLabel: function (character, row, column) {
return column;
}
},
legend: {
node: $('#legend'),
items: [
['a', 'available', '可用座位'],
['a', 'unavailable', '已售出座位']
]
}
});
// 添加座位元素
for (var i = 1; i <= 60; i++) {
$('#seat-map').append('<div class="seat" id="seat' + i + '">' + i + '</div>');
}
// 获取选中的座位
$('#seat-map').on('click', '.seat', function () {
var seatId = this.id;
var seat = $('#' + seatId);
if (seat.hasClass('available')) {
seat.removeClass('available').addClass('selected');
} else if (seat.hasClass('selected')) {
seat.removeClass('selected').addClass('available');
}
});
```
这个示例代码会在页面上生成一个 6 行 10 列的座位图,每个座位的价格为 10 元。用户可以点击座位来选择或取消座位。