我正在尝试使用链接和无序列表项构建一个座位预订系统。平面图中的行彼此不同。第 1 行有 22 个座位,第 2 行有 24 个座位等。我试图将列表项居中,但我无法弄清楚。
这是我的代码:
$(function generateSeats() {
var settings = {
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 22,
seatHeight: 22,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
var init = function(reservedSeat) {
var col = [22, 24, 24, 24, 24, 26, 28, 30, 30, 30, 30, 30, 28, 26, 26, 24, 24, 20, 16, 14];
var str = [],
seatNo, className;
for (i = 0; i < col.length; i++) {
for (j = 0; j < col[i]; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
str.push('<li class="' + className + '"' +
'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
'<a title="' + seatNo + '">' + seatNo + '</a>' +
'</li>');
}
}
$('#place').html(str.join(''));
};
var bookedSeats = [];
init(bookedSeats);
$('.' + settings.seatCss).click(function() {
if ($(this).hasClass(settings.selectedSeatCss)) {
alert('Deze stoel is al bezet');
} else {
$(this).toggleClass(settings.selectingSeatCss);
}
});
$('#btnShow').click(function() {
var str = [];
$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.' + settings.selectingSeatCss + ' a'), function(index, value) {
str.push($(this).attr('title'));
});
alert(str.join(','));
})
$('#btnShowNew').click(function() {
var str = [],
item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function(index, value) {
item = $(this).attr('title');
str.push(item);
});
alert(str.join(','));
})
});
#holder {
height: 447px;
width: 667px;
background-color: #F5F5F5;
margin: auto;
border: 1px solid #A4A4A4;
position: relative;
}
#place {
display: table-row;
}
#place li {
display: table-cell;
vertical-align: middle;
list-style-type: none;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
<ul id="place">
</ul>
</div>
<div class="button">
<input type="button" id="btnShowNew" value="Keuze" />
</div>
最佳答案
我建议您为每一行使用一个 ul
并将它们居中。现在的情况是,标记在单个 ul
中没有行的概念,因此您无法将它们居中。
关于javascript - 我如何在无序列表中居中绝对列表项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26124092/