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

【问题标题】：How to add a conditional to jQuery .hover()如何向 jQuery .hover() 添加条件
【发布时间】：2011-08-02 20:52:45
【问题描述】：

我想使用 jQuery 悬停功能，可以毫无问题地使用。

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

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

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

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

【问题讨论】：

或许hasClass('classname') ??
其实这应该是很简单的……写完这个问题就显得微不足道了。
也许有全局外部变量？？
或者有两个具有相同css的类名，一个用于悬停，一个用于点击。

标签： jquery hover conditional

【解决方案1】：

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

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

【讨论】：

只有在页面加载时元素具有tag-over 类时才有效，点击后无效。

【解决方案2】：

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

【讨论】：

是的，我想我将不得不使用这种方法。
请注意，您可能甚至不必对 CSS 进行太多更改，只需制作选择器：.tag-over, .tag-focus {

【解决方案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 方法来存储有关特定元素的信息。

【讨论】：

【解决方案4】：

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

希望对你有帮助

【讨论】：

【解决方案5】：

虽然here 不是优雅的解决方案。

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

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

【讨论】：