jquery - 如果用户点击远离元素......然后做......（Jquery）

Question

可能重复：
如何检测元素外的点击？

我有一个无序列表，当用户单击其中一个列表项时，该列表项会获得一类“活动”。有没有可能写一个类似的语句。如果用户在 $(this) 之外单击另一个列表项，则 addClass("active2")。如果你不明白，请告诉我。谢谢！

Answer 1

我这样理解你的问题：

第一个单击的项目始终保留该类active2，而任何其他单击的项目都将获得该类active（active从先前单击的项目中删除）。

解决方案如下所示：

• 如果列表中没有带有 class 的项目active，则之前没有选择任何项目，因此您添加active到当前项目。
• 如果有一个，但没有元素具有 class active2，则将其添加active2到带有 class 的项目中active，删除active并将其添加到当前项目中。
• 如果两者都active存在active2，active则从该项目中删除并添加active到当前项目。

这在代码中看起来像这样：

var $lis = $("#myList li");

$('#myList').on('click', 'li', function() {
    if($lis.hasClass('active')) {
        if(!$lis.hasClass('active2')) {
            $lis.filter('.active').toggleClass('active active2');
        }
        else {
            $lis.filter('.active').removeClass('active');
        }
    }
    $(this).addClass('active');
});

或者，由于在第二次单击项目后，总会有具有这些类的元素项目，您也可以简单地使用标志而不是一遍又一遍地搜索元素。

Answer 2

修改后的问题的修改答案：

$(document).ready(function() {
    $('ul#myList li:not(.active)').click(function() {
        // user has clicked on an li that does not have class="active"
        $(this).addClass('active');
        $('ul#myList li.active').each(function() {
            // for each li with class="active", remove it and add "active2"
            $(this).removeClass('active').addClass('active2');
        });
    });
});