如何使用 if hasClass 条件禁用 jQuery mouseleave 事件？ //悬停动画

Posted 2023-05-08

【中文标题】如何使用 if hasClass 条件禁用 jQuery mouseleave 事件？ //悬停动画

【英文标题】：How to disable jQuery mouseleave event with if hasClass condition ? // hover animation

【发布时间】：2012-07-27 01:45:07

【问题描述】：

我有一个简单的悬停动画；我分离了mouseenter 和mouseleave 函数来定义鼠标离开的条件。如果该条件属实；禁用 mouseleave 功能，但我无法让这个条件工作，javascript 忽略我的条件并运行 mouseleave 函数。

Here is jsFiddle.

jQuery:

$('.bigBox').mouseenter(function() 
    $('.trigger').stop().animate('left':'-50px',222);
    $('.bigBox').stop().animate('left':'-1px',222);
);


var holdCondition = $('#hold').hasClass('selected');
//tried to disable mouseleave here but didnt work

if ( !holdCondition ) //if #hold has not class selected
    $('.bigBox').mouseleave(function() 
        $('.trigger').stop().animate('left':'-1px',222);
        $('.bigBox').stop().animate('left':'-111px',222);
    );



$('.option').click(function()
    $('.option').removeClass('selected');
    $(this).addClass('selected');
);

html:

<div class="bigBox">
   <span class="trigger">X</span>

   <span class="option selected">A</span>
   <span class="option">B</span>
   <span id="hold" class="option">Hold</span>
</div>

css:

.bigBox 
    position:fixed; top:10%; width:100px; height: 20px; 
    left:-111px;  border:1px solid #000; padding-left:5px;

.trigger  
    position:fixed; top:10%; width:20px; height: 20px; 
    left:-1px; border:1px solid #000; text-align:right; padding-right:5px;

.option  margin:0 5px; cursor:pointer; 
.selected  color:#f00; 

​

【问题讨论】：

我已经编辑了你的代码检查这个jsfiddle.net/Bvr9B/14

【参考方案1】：

您的holdCondition 只会运行一次，而您必须每隔.mouseleave() 检查一次。 试试这个。

Here is jsFiddle.

   $('.bigBox').mouseleave(function() 
        var holdCondition = $('#hold').hasClass('selected');

        if ( !holdCondition ) //if #hold has not class selected
          $('.trigger').stop().animate('left':'-1px',222);
          $('.bigBox').stop().animate('left':'-111px',222);
        
    );

【讨论】：

看起来我犯了一个简单的错误 Bob。感谢您指出这一点。

【参考方案2】：

“选择”何时应用于 id 为“保持”的元素？ 我怀疑这发生在用户交互中，不一定是在页面加载时？

你写这个的方式：

if ( !holdCondition ) //if #hold has not class selected
    $('.bigBox').mouseleave(function() 

如果不是holdCondition，则鼠标离开在页面加载时被定义。

您想要检查 mouseleave 内部的 !holdCondition：

$('.bigBox').mouseleave(function() 
    if ( !holdCondition )
        $('.trigger').stop().animate('left':'-1px',222);
        $('.bigBox').stop().animate('left':'-111px',222);
    
);