在元素类更改上运行 jQuery 回调？ [复制]答案

【问题标题】：Run jQuery callback on element class change? [duplicate]在元素类更改上运行 jQuery 回调？ [复制]
【发布时间】：2013-12-24 20:59:34
【问题描述】：

这是我正在尝试使用的当前 jQuery 代码

$("ul.nav.nav-tabs li.active a").each(function(){
        switch(this.hash) {
            case "#core":
                alert("Core");
            break;
            case "#parallel":
                alert("Parallel");
            break;
            case "#cron_settings":
                alert("Cron Settings");
            break;  
        }
})

这是我也在使用的 HTML 标记

<ul class="nav nav-tabs">
    <li class="active"><a href="#core" data-toggle="tab">Core Settings</a></li>
    <li><a href="#parallel" data-toggle="tab">Parallel settings</a></li>
    <li><a href="#cron_settings" data-toggle="tab">Cron limit settings</a></li>
</ul>

当active 类发生变化时，我需要它基本上重新运行 switch()，因为它只在document.ready 上执行一次，如何我可以让它重新运行switch()吗？可能使用change()？

【问题讨论】：

元素属性改变没有跨浏览器事件
根据您正在测试的浏览器，您可能还会发现有趣的DOMAttrModified 事件。请记住，并非所有浏览器都支持它。详情请见help.dottoro.com/ljfvvdnm.php#additionalEvents。

标签： javascript jquery html css

【解决方案1】：

根据建议'hashchange' 活动的早期海报，这里是您想要的工作副本：

$('li').on('click', function() { 
    $('li').removeClass('active');
    $(this).addClass('active'); 
    // UNNECESSARY: window.location.hash=$('a', this).attr('href'); 
});

$(window).on('hashchange', function(){
        switch(window.location.hash) {
            case "#core":
                alert("Core");
                break;
            case "#parallel":
                alert("Parallel");
                break;
            case "#cron_settings":
                alert("Cron Settings");
                break;
        }
});

【讨论】：

嗯...如果您可以指望 onClick 事件触发，为什么不将 switch 语句放在 onClick 回调函数中，而不是添加额外的事件侦听器？如果您不能指望 onClick 事件触发，那么您的“window.location.hash”将没有正确的值。
另外，您不会按照指示的需要运行一次开关功能。
我最初使用了<li> 点击绑定，以确保在点击链接时正确调整active 类。事实是，window.location.hash=$('a', this).attr('href'); 是不必要的，因为单击实际上是在包含的 <a> 上，它将正确设置 window.location。事件委托完成了这项工作。此外，switch 的初始运行是 OP 已经知道如何做的事情。
这很好。但它只有在点击链接时才有效。既然如此，那你为什么不使用点击回调来运行开关呢？

【解决方案2】：

我不熟悉 'hashchange' 事件的浏览器兼容性。

我认为这是多虑了。有两个相当简单的解决方案。

最简单的假设是活动链接将根据用户点击这些链接而改变。在这种情况下，只需使用 onClick 触发器重新运行您的脚本。

var FooBar = function(){
    $("ul.nav.nav-tabs li.active a").each(function(){
        switch(this.hash) {
            case "#core":
                alert("Core");
            break;
            case "#parallel":
                alert("Parallel");
            break;
            case "#cron_settings":
                alert("Cron Settings");
            break;  
        }
    });
};
FooBar();//run the function once initially
$("ul.nav.nav-tabs").each(function(){
    $(this).click=FooBar;
});

或者，如果可以通过 javascript 修改“活动”类，您可以在该代码中调用 FooBar。如果您无法修改该 javascript，则可以使用超时来解决此问题。

setInterval(FooBar, 500);//Run the switch function every half second

我不确定你到底想完成什么，我怀疑可能有更简单的方法来做到这一点。

编辑：

您可以使用此代码，根据 Thalis Kalfigkopoulos 的答案修改。这将直接从 on click 事件中运行 switch 语句：

$('li').on('click', function(e) { 
    $('li').removeClass('active');
    $(this).addClass('active');
    switch($(this).children('a').prop('hash')) {
            case "#core":
                alert("Core");
                break;
            case "#parallel":
                alert("Parallel");
                break;
            case "#cron_settings":
                alert("Cron Settings");
                break;
        }
});

【讨论】：

【解决方案3】：

这可能有效。

<script>
    $(function(){
        // Bind the event.
        $(window).on("hashchange",function(){
            // Alerts every time the hash changes!
            alert( "call you function");
            // your switch..
        })
    });
</script>

【讨论】：