Question

I have a selection menu using toggleClass(). to see which menu options were selected:

$('.img1, .img2, .text1, .tex2').click(function() {
    $(this).toggleClass('selected');
});

The way my selection menu works is that if two elements have the class selected then something will happen. For example:

if ( $('.img1').hasClass('selected') && ('.text1').hasClass('selected') ) {
    // do something
}

This all works perfectly however I want to disable the user from picking two imgs or two texts. The way I want to do this is just have the first selected element be removed from the selected class and the second selected element stay selected. For example:

if ( $('.img1').hasClass('selected') && ('.img2').hasClass('selected') ) {
        // remove selected from the element that was first clicked and keep selected on the element that was clicked second
}

What would be the best way of achieving this? Thanks in advance.

Answer 1

Try:

$('.img1, .img2').click(function() {
    $('.img1, .img2').removeClass('selected').filter(this).toggleClass('selected');
});
$('.text1, .text2').click(function() {
     $('.text1, .text2').removeClass('selected').filter(this).toggleClass('selected');
});

Separating your click events will ensure only one of each type of item is selected.

Also, make sure you aren’t doing $('this').

It should be $(this).