我正在尝试显示数据库中不可用的座位
<?php
$query = "SELECT * FROM booking;";
$result = mysqli_query ($connection,$query) or die ("<div class='alert alert-danger' role='alert'>You couldn't execute booking query</div>");
//Fetch all rows for each booking
while ($row = mysqli_fetch_array ($result, MYSQLI_ASSOC)) {
extract ($row);
echo "
<script type='text/javascript'>
sc.get(['".$BOOKING_SEAT."']).status('unavailable');
</script>";
echo "\n";
}
?>
这是我后来看到的:
<!-- Booking JavaScript -->
<script type="text/javascript" src="js/booking.js"></script>
<script type="text/javascript" src="js/seat-charts.min.js"></script>
<script type='text/javascript'>
sc.get(['5_7']).status('unavailable');
</script>
<script type='text/javascript'>
sc.get(['5_8']).status('unavailable');
</script>
<script type='text/javascript'>
sc.get(['5_9']).status('unavailable');
</script>
<script type='text/javascript'>
sc.get(['5_10']).status('unavailable');
</script>
当我检查代码时,我看到了我想要的东西,但它不起作用,因为它显示“未捕获的 ReferenceError:sc 未定义”。
“sc”和“get”来自“js/booking.js”和“js/seat-charts.min.js”。
更新:
var price = 10; //price
$(document).ready(function() {
var $cart = $('#selected-seats'), //Sitting Area
$counter = $('#counter'), //Votes
$total = $('#total'); //Total money
var sc = $('#seat-map').seatCharts({
map: [ //Seating chart
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa'
],
naming : {
top : false,
getLabel : function (character, row, column) {
return column;
}
},
legend : { //Definition legend
node : $('#legend'),
items : [
[ 'a', 'available', 'Option' ],
[ 'a', 'unavailable', 'Sold']
]
},
click: function () { //Click event
if (this.status() == 'available') { //optional seat
$('<option selected>R'+(this.settings.row+1)+' S'+this.settings.label+'</option>')
.attr('id', 'cart-item-'+this.settings.id)
.attr('value', (this.settings.row+1)+'_'+this.settings.label)
.data('seatId', this.settings.id)
.appendTo($cart);
$counter.text(sc.find('selected').length+1);
$counter.attr('value', sc.find('selected').length+1);
$total.text(recalculateTotal(sc)+price);
$total.attr('value', recalculateTotal(sc)+price);
return 'selected';
} else if (this.status() == 'selected') { //Checked
//Update Number
$counter.text(sc.find('selected').length-1);
$counter.attr('value', sc.find('selected').length-1);
//update totalnum
$total.text(recalculateTotal(sc)-price);
$total.attr('value', recalculateTotal(sc)-price);
//Delete reservation
$('#cart-item-'+this.settings.id).remove();
//optional
return 'available';
} else if (this.status() == 'unavailable') { //sold
return 'unavailable';
} else {
return this.style();
}
}
});
//sold seat
//sc.get(['1_2', '4_4','4_5','6_6','6_7','8_5','8_6','8_7','8_8', '10_1', '10_2']).status('unavailable');
});
//sum total money
function recalculateTotal(sc) {
var total = 0;
sc.find('selected').each(function () {
total += price;
});
return total;
}
**
The problem is the "sc" is not global and we have to put it outside the function
**
最佳答案
您应该初始化您的seatCharts
,例如:
var sc = $('#seat-map').seatCharts({
map: [
'aaaaaaaaaaaa',
'aaaaaaaaaaaa',
'bbbbbbbbbb__',
'bbbbbbbbbb__',
'bbbbbbbbbbbb',
'cccccccccccc'
],
seats: {
a: {
price : 99.99,
classes : 'front-seat' //your custom CSS class
}
},
click: function () {
if (this.status() == 'available') {
//do some stuff, i.e. add to the cart
return 'selected';
} else if (this.status() == 'selected') {
//seat has been vacated
return 'available';
} else if (this.status() == 'unavailable') {
//seat has been already booked
return 'unavailable';
} else {
return this.style();
}
}
});
并尝试添加 ready
函数,因为 sc
变量将在加载后声明,否则 sc.gets
将在加载时触发DOM:
echo "<script type='text/javascript'> $(document).ready(function(){";
while ($row = mysqli_fetch_array ($result, MYSQLI_ASSOC)) {
extract ($row);
echo "sc.get(['".$BOOKING_SEAT."']).status('unavailable'); \n";
}
echo "});"
检查 jQuery Seat Charts .
希望这对您有所帮助。
关于javascript - HTML 脚本和 javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34619319/