1

我有一个选择菜单，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
}

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

4

3 回答 3

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

于 2012-07-31T18:24:18.313 回答
0

这会将类名“first”添加到单击的第一个项目。剩下的就看你了。

$('.img1, .img2, .text1, .tex2').click(function() {
    $('this').toggleClass('selected');
    if($('.first').length==0) {
        $('this').addClass('first');
    }
})
于 2012-07-31T18:13:14.163 回答
0

也许如果您有一个跟踪单击项目的 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();
}

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

于 2012-07-31T18:15:30.917 回答