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

Question

I'm trying to make seat booking system that allows a maximum of 4 seats to be selected. Each seat can be selected then deselected on click implementing toggleClass to change status from 'free' 'booked' on seats up to the maxSeats value of 4. It works fine up until the 4th seat is clicked. On a second click to the 4th seat, it does not pop from the tempArray and the class stays as 'booked'. The 1st, 2nd and 3rd seats all add and remove on click I have tried all manner of things to the point where I'm totally devoid of ideas where to go with it. I can see the items being added and removed from tempArray in the console so its not far away.

  // 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'
                    });
                });

Are you sure you are making it past this condition (`if ($('.booked').length < maxSeats) {`) once you have 4 seats selected? Seems like you wouldn't be able to remove because of that condition — Rob M., Feb 22 '16 at 16:45
It adds and removes each .booked element in the console up until the 4th, which is the value of maxSeats(4). What do you suggest? — Orbital676, Feb 22 '16 at 17:26

Vixed · Accepted Answer · 2016-02-23T12:35:23.700

0

Check this fiddle (maxSeats:4 in 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: think always about the user experience! It's easy, imagine that you are an user and not a developer ;)

edited Feb 23 '16 at 12:35

answered Feb 23 '16 at 10:00

Vixed

3,153
4
31
65

Thanks Vixed. I'm just about to go try this. Will let you know how I get on. – Orbital676 Feb 23 '16 at 11:45
Worked a treat. Thank you so much, Vixed. – Orbital676 Feb 23 '16 at 12:16
In this line... window.tempArray.splice(window.tempArray.indexOf(seatLocation), 1); would .inArray just work the same way as .indexOf ? – Orbital676 Feb 23 '16 at 12:28
no, with .inArray you retrieve true or false, while with this you retrieve the position – Vixed Feb 23 '16 at 12:30
@Orbital676 So... at the end? – Vixed Feb 23 '16 at 13:08
Hey, Vixed. I've been trying to add an icon that spits out beside the seatLocation. It is generated once but not with the other 3 seats. I stuck the addition code in my seat location function as follows... – Orbital676 Feb 25 '16 at 20:10
function updateLocation(e) { $('#seatLocation').html(window.tempArray.join('- -')).css({ backgroundColor: '#F6511D', color: '#fff', padding: '0.2em', borderRadius: '2px', margin: '0 10px 0 0' }); var weeMan = $(''); $('#seatLocation').prepend(weeMan); } – Orbital676 Feb 25 '16 at 20:11
Sure, but how do I do it. #noob – Orbital676 Feb 26 '16 at 13:56

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

1 Answers1