Question

以下是我正在尝试使用的 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执行一次{1}}，如何让它重新运行switch()？可能使用change()？

Answer 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;
        }
});

Answer 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修改'active'类，则可以在该代码中调用FooBar。如果你不能修改那个javascript，那么你可以使用超时来解决这个问题。

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

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

编辑：

您可以使用此代码，修改自Thalis Kalfigkopoulos的答案。这将直接从单击事件运行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;
        }
});

Answer 3

这可能有用。

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

在元素类更改上运行jQuery回调？

3 个答案: