单击事件从数组中添加/删除特定数量的元素

Question

我正在尝试制作最多允许选择 4 个座位的座位预订系统。可以选择每个座位，然后在单击实现 toggleClass 时取消选择，以将座位上的状态从 'free' 'booked' 更改为 maxSeats 值 4。在单击第 4 个座位之前它工作正常。第二次单击第 4 个座位时，它不会从 tempArray 中弹出，class 保持为 'booked'。第 1、第 2 和第 3 个座位都可以通过单击添加和删除我已经尝试了各种方式，以至于我完全不知道该去哪里。我可以在控制台的 tempArray 中看到正在添加和删除的项目，所以它不远。

  // Create an empty array to store the seat ids for click event
    window.tempArray = []; 

    //Handle the click event

    $('#plan').on('click', 'td.n', function() {

        var maxSeats = d.numSeats; //grabbed from JSON

        if ($('.booked').length < maxSeats) { // Use .length to check how many '.booked' DOM elements present

            if ($(this).hasClass('taken')) {
                alert('This Seat Is already booked!');
            } else {
                // Set the class to booked
                $(this).toggleClass('booked');

                // Iterate the .booked elements
                $(this).each(function() {

                    // Getting the id of each seat
                    var seatLocation = $(this).attr('id');

                    // If seatLocation is not inArray - add it - else - pop it off 
                    //$.inArray take (value , name of array)
                    var index = $.inArray(seatLocation, window.tempArray);

                    if (index == -1) { // -1 is returned if value is not found in array
                        window.tempArray.push(seatLocation);

                    } else {
                        window.tempArray.pop(seatLocation);
                    }
                    console.log(window.tempArray);

                    // output added seats to the page...
                    // join() convert array to a string, putting the argument between each element.
                    $('#seatLocation').html(window.tempArray.join('-  -')).css({
                        backgroundColor: '#F6511D',
                        color: '#fff',
                        padding: '0.2em',
                        borderRadius: '2px',
                        margin: '0 10px 0 0'
                    });
                });

Answer 1

检查此 fiddle （fiddle 中的最大座位数：4）。

// Create an empty array to store the seat ids for click event
window.tempArray = [];

//A function to update the location div
function updateLocation(){
    $('#seatLocation').html(window.tempArray.join('-  -')).css({
        backgroundColor: '#F6511D',
        color: '#fff',
        padding: '0.2em',
        borderRadius: '2px',
        margin: '0 10px 0 0'
    });
}

//Handle the click event
$('#plan').on('click', 'td.n', function() {
    var maxSeats = d.numSeats; //grabbed from JSON
    var seat=$(this);
    var seatLocation = seat.attr('id');
    if (seat.hasClass('booked')){ // Check if the user changed his mind
            seat.removeClass('booked')

            // Delete element in array. 
            // Function from 
            window.tempArray.splice(window.tempArray.indexOf(seatLocation), 1);
            updateLocation();
            console.log(window.tempArray);
    } else if ($('.booked').length < maxSeats) { // Use .length to check how many '.booked' DOM elements present
        if (seat.hasClass('taken')){
            alert('This Seat Is already booked!');
        } else {
            seat.addClass('booked')
            window.tempArray.push(seatLocation);
            updateLocation();
            console.log(window.tempArray);
        }
    }

});

PS：时刻考虑用户体验！很简单，假设您是用户而不是开发人员 ;)

单击事件从数组中添加/删除特定数量的元素

Add / Remove specific number of elements from an Array on Click event

javascript

jquery

arrays

toggleclass