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的if函数中包含的$(document).ready块中，该函数在页面加载时触发一次。实质上，您没有将此附加到DOM ready事件以外的任何事件。因此，它在页面加载并且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，这可能会给你误报。如果你想对结果做一些事情，或者在有多个结果的情况下做其他事情，你需要考虑对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()，再次设置超时，然后继续。< / p>
我将超时设置为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")});

});

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

2 个答案: