如何查看首先单击哪个元素？

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) .

Answer 2

This will add the class name "first" to the first item that is clicked. The rest is up to you.

$('.img1, .img2, .text1, .tex2').click(function() {
    $('this').toggleClass('selected');
    if($('.first').length==0) {
        $('this').addClass('first');
    }
})

Answer 3

perhaps if you had an array that kept track of the id of the clicked items, you could use that:

var clickArr = new Array();
$('.img1, .img2, .text1, .tex2').click(function()
{
    $('this').toggleClass('selected');
    clickArr.push($(this).attr("id"));
});

then, when you find a spot where both are selected:

if ( $('.img1').hasClass('selected') && ('.img2').hasClass('selected') )
{
    $("#"+clickArr[0]).removeClass("selected");
    clickArr.shift();
}

This could be tricky because you will have to empty the array every time you "process a selection" that is valid. But maybe this can get you started.