CSS 只需应用一个席位 <li>(限制多选）

css has to apply only one seat <li> ( restrict multiple select)

本文关键字：li 应用 CSS 一个更新时间：2023-09-26

巴士预订

以下代码生成 multilpe <li>，当用户单击座位时，所选席位 css 将更改。但我想限制多项选择。必须允许用户只选择一个席位，如果他选择第二个<li>（席位），那么第一个必须取消选择

演示： http://demo.techbrij.com/780/seat-reservation-jquery-demo.php

代码： http://techbrij.com/seat-reservation-with-jquery

    $(function () {
        var settings = {
            rows: 6,
            cols: 6,
            rowCssPrefix: 'row-',
            colCssPrefix: 'col-',
            seatWidth: 30,
            seatHeight: 30,
            seatCss: 'seat',
            selectedSeatCss: 'selectedSeat',
            selectingSeatCss: 'selectingSeat'
        };
        var init = function (reservedSeat) {
            var str = [], seatNo, className;
            for (i = 0; i < settings.rows; i++) {
                for (j = 0; j < settings.cols; j++) {
                    seatNo = (i + j * settings.rows + 1);   // Seat No  eg : seatNo = 0+0*0+1 (1)
                    className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString(); // Class each seat class Name=seat row-0 col-0
                    if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
                        className += ' ' + settings.selectedSeatCss;
                    }
                    str.push('<li onclick="gettable('+ seatNo+')" class="' + className  +" table"+seatNo+ '">' 
                                +'<a title="' + seatNo + '">' + seatNo + '</a>' +
                              '</li>');
                }
            }
            $('#place').html(str.join(''));
        };


        var bookedSeats = [5, 10, 25];
        init(bookedSeats);

        $('.' + settings.seatCss).click(function () {
        if ($(this).hasClass(settings.selectedSeatCss)){
            alert('This seat is already reserved');
        }
        else{
            $(this).toggleClass(settings.selectingSeatCss);

            }
        });

首先从所有元素中删除该类，然后将其添加到选定的元素中。

$('.' + settings.seatCss).click(function () {
        if ($(this).hasClass(settings.selectedSeatCss)){
            alert('This seat is already reserved');
        }
        else{
            $('.' + settings.seatCss).removeClass(settings.selectingSeatCss);
            $(this).addClass(settings.selectingSeatCss);

            }
        });

将 else 部分更改为：

 else{
      $(this).toggleClass(settings.selectingSeatCss);
      $(".settings.selectingSeatCss").not(this).removeClass('settings.selectingSeatCss');
      }

尝试用这个事件更改click()代码。

$('.' + settings.seatCss).click(function () {
   $(this).addClass(settings.selectedSeatCss).siblings(this).removeClass(settings.selectedSeatCss);
});

工作演示。希望对您有所帮助。