jQuery - 在添加和/或删除类名时运行函数

Question

我正在开发一个条件语句的函数，该语句（现在）必须在从div层删除类名时运行警报。下面的代码：

<div class="ui-tabs-panel ui-tabs-hide">panel</div> 
<div><a href="#" class="control">control</a></div> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=3.0"></script> 
<script type="text/javascript"> 
<!-- 
$(document).ready(function(){ 
    $('.control').hover(
     function() { 
      $('.ui-tabs-panel').removeClass('ui-tabs-hide'); 
     }, 
     function() { 
      $('.ui-tabs-panel').addClass('ui-tabs-hide'); 
     } 
    ); 
    if ($('.ui-tabs-panel:not(.ui-tabs-hide)')) { 
     alert('hello'); 
    } 
}); 
//--> 
</script> 

整个“控制”链接，连接到它的功能，只是有触发添加和移除类名。

现在，当页面加载时会出现警报，它不应该，所以我认为我必须在那里得到错误的语法。使用“control”链接从div中删除ui-tabs-hide类不会触发警报，它应该。我猜想我需要合并某种事件绑定，但我不太了解事件绑定。

有谁能帮我解决这个问题吗？

Answer 1

我不知道你是否可以检测到一个“事件”，比如元素上的类名操作。

您在页面加载中看到提醒的原因在于它位于包含在jQuery的$(document).ready函数中的if块中，该函数在页面加载时触发一次。实质上，您没有将此附加到除DOM准备事件以外的任何事件。因此，当页面加载并准备好DOM时触发，并且if语句的计算结果为true。

您还需要使用.length财产在你的表达：

if ($('.ui-tabs-panel:not(.ui-tabs-hide)').length) { 
    alert('hello'); 
} 

// Or... 
if ($('.ui-tabs-panel').not('.ui-tabs-hide').length) { 
    alert('hello'); 
} 

注意

我只是想在这里警告说，上面的代码将取决于你试图什么如果你的班级变化检测活动 - .length会给你匹配元素的总数，所以如果你有多个.ui-tabs-panel's，这可能会给你一个误报。如果您想在结果或某种其他事情上做某些事情（如果有多个结果的话），您需要考虑类似于调用jQuery结果的.each()。

的一种方式可能是运行超时，并试图检查ui-tabs-panel类元素也有ui-tabs-hide类：

http://jsfiddle.net/userdude/4cF5v/

$(document).ready(function(){ 
    $('.control').hover(
     function() { 
      $('.ui-tabs-panel').removeClass('ui-tabs-hide'); 
     }, 
     function() { 
      $('.ui-tabs-panel').addClass('ui-tabs-hide'); 
     } 
    ); 
    runCheck(); 
}); 

function runCheck(){ 
    if ($('.ui-tabs-panel').hasClass('ui-tabs-hide')) { 
     alert('hello'); 
    } 
    setTimeout(function(){runCheck()},5000); 
} 

我创建了一个runCheck()功能，放在.hasClass()通话它，然后创建一个超时，这将再次运行runCheck()，再次设置超时，并继续。

我将超时设置为5000，以便您的浏览器不会进入无限循环（每隔5秒检查一次）。在实践中，它可能应该调整到50到500之间; 1000等于1000毫秒或1秒。

这是一个50毫秒超时，并不会锁定您的计算机到一个alert()循环的另一种方法：

http://jsfiddle.net/userdude/k44qR/

鼠标悬停控制环节，鼠标移开，然后再次将鼠标放置，和你”会看到它开始，停止，然后再次开始。

Answer 2

您可以创建自定义事件

演示 http://jsfiddle.net/k44qR/2/

$(document).ready(function(){ 
    $('.control').hover(
     function() { 
      $('.ui-tabs-panel').removeClass('ui-tabs-hide').trigger("displayPanel"); 
     }, 
     function() { 
      $('.ui-tabs-panel').addClass('ui-tabs-hide'); 
     } 
    ); 

    $('.ui-tabs-panel').bind("displayPanel",function(){alert("hello")}); 

});