如何向 jQuery .hover() 添加条件

Question

我想使用 jQuery 悬停功能并且可以毫无问题地这样做。

 $(".tag").hover(function() { $(this).addClass("tag-over"); }, function() { $(this).removeClass("tag-over"); });

然而，在某些情况下，由于 click 事件，我已经添加了 tag-over 类，但我不希望在用户移除鼠标时将其删除。

如果 tag-over 类尚未附加到元素，如何仅执行 addClass() 和 rmeoveClass()。

如果这个解释不好，请告诉我。

Answer 1

实际上，您可能希望为点击事件使用不同的选择器：tag-focus 或类似的东西。这样你的元素就可以同时拥有这两个类，这并不重要，更容易跟踪。

Answer 2

如果我理解你的问题，你可以使用 :not() ，我认为这将是最好处理这个问题。

$(".tag:not(.tag-over)").hover(function() { $(this).addClass("tag-over"); }, function() { $(this).removeClass("tag-over"); });

Answer 3

我认为这样的事情应该做到这一点：

$('.tag').hover(function() {
    var $this = $(this);

    if ($this.hasClass('tag-over')) {
        $this.data('tag-over-existed', true);
    } else {
        $this.addClass('tag-over');
    }
}, function() {
    var $this = $(this);

    if (!$this.data('tag-over-existed')) { // i.e. if we added the class ourselves
        $this.removeClass('tag-over');
    }

    $this.removeData('tag-over-existed');
});

这使用 data 方法来存储有关特定元素的信息。

Answer 4

为什么不尝试为点击事件添加 tagover 类，为悬停事件添加 tag-over 类？

希望这有帮助

Answer 5

虽然这里并不是一个优雅的解决方案。

不好的一点是，它添加了 click 类来检查。

$('.tag').hover(
    function (){
        $(this).addClass("tag-over"); 
    },
    function (){
        if(!$(this).hasClass('clicked')){
            $(this).removeClass("tag-over"); 
        }
    }
).click(function (){
            $(this).addClass('click');
        })