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

Question

我正在尝试建立一个最多可以选择4个座位的座位预定系统。 可以选择每个席位，然后在单击时取消选中，实现toggleClass，以将席位的状态从“免费”“预订”更改为maxSeats值，最大为4。它可以正常工作，直到单击第4个席位为止。 在第二个位置上单击第二个按钮，它不会从tempArray中弹出，并且该类保持为“已预订”状态。 第一个，第二个和第三个座位都在单击时添加和删除，我尝试了所有方式，直到我完全不知道该怎么去使用它。 我可以在控制台中看到从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

检查这个小提琴 （ 小提琴中的 maxSeats：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 http://stackoverflow.com/a/5767357/1076753
            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：请始终考虑用户体验！ 很容易，假设您是用户而不是开发人员;）