Question

我试图制作座位预订系统，最多允许选择4个座位。可以选择每个席位，然后在点击实施toggleClass时取消选择，以更改“免费”状态。＆＃39;预订＆＃39;在最大座位值为4的座位上。它可以正常工作直到第四个座位被点击。在第二次点击到第四个座位时，它不会从tempArray中弹出，并且该课程保持为＆＃39;预订＆＃39;。第一，第二和第三个座位都添加和删除点击我已经尝试了各种各样的事情，我完全没有想法去哪里。我可以在控制台中看到正在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 （maxSeats：4 in the fiddle）。

// 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：始终关注用户体验！这很容易，假设您是用户而不是开发人员;）

在Click事件上添加/删除Array中特定数量的元素

1 个答案: