Question

我有一个使用toggleClass().的选择菜单，以查看选择了哪些菜单选项：

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

我的选择菜单的工作方式是，如果两个元素具有类selected，那么就会发生一些事情。例如：

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

这一切都很完美，但我想禁止用户选择两个imgs或两个texts。我想要这样做的方法是从选定的类中删除第一个选定的元素，并保持选择第二个选定的元素。例如：

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
}

实现这一目标的最佳方法是什么？提前谢谢。

Answer 1

尝试：

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

分离您的点击事件将确保只选择每种类型的项目中的一种。

另外，请确保您没有$('this')。

应为$(this)。

Answer 2

这将添加班级名称＆＃34; first＆＃34;到被点击的第一个项目。其余的由你决定。

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

Answer 3

也许如果你有一个跟踪被点击项目ID的数组，你可以使用它：

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

然后，当您找到两个都被选中的地点时：

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

这可能很棘手，因为每次“处理有效的选择”时都必须清空数组。但也许这可以让你开始。

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

3 个答案: