Question

我最终拼凑了一些适用于我的问题here的代码。但是，它似乎很长，因为我已经创建了单独的函数，用于刷新具有特定散列的页面以及通过单击选项卡访问同一页面时。

$(document).ready(function () {
    $(function () {
        var loc = window.location.href; // For when Hazel is refreshed
        if (/Hazel/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("r p c").addClass("h");
            $("#tab2").removeClass("tail");
            $("#tab3, #tab4").addClass("tail");
        }
    });
    $(function () {
        var loc = window.location.href; // For when Red is refreshed
        if (/Red/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("h p c").addClass("r");
            $("#tab3, #tab2").removeClass("tail");
            $("#tab4").addClass("tail");
        }
    });
    $(function () {
        var loc = window.location.href; // For when Pink is refreshed
        if (/Pink/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("h r c").addClass("p");
            $("#tab3, #tab4").removeClass("tail");
            $("#tab2").addClass("tail");
        }
    });
});
$(function () {
    var loc = window.location.href; // For when Cyan is refreshed
    if (/Cyan/.test(loc)) {
        $("#tab1,#tab2,#tab3,#tab4").removeClass("h r p").addClass("c");
        $("#tab4").removeClass("tail");
        $("#tab3, #tab2").addClass("tail");
    }
});
$("#tab1").click(function () {
    $(window).bind("hashchange", function () {
        var loc = window.location.href; // For when Hazel tab is clicked
        if (/Hazel/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("r p c").addClass("h");
            $("#tab2").removeClass("tail");
            $("#tab3, #tab4").addClass("tail");
        }
    });
});
$("#tab2").click(function () {
    $(window).bind("hashchange", function () {
        var loc = window.location.href; // For when Red tab is clicked
        if (/Red/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("h p c").addClass("r");
            $("#tab3, #tab2").removeClass("tail");
            $("#tab4").addClass("tail");
        }
    });
});
$("#tab3").click(function () {
    $(window).bind("hashchange", function () {
        var loc = window.location.href; // For when Pink tab is clicked
        if (/Pink/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("h r c").addClass("p");
            $("#tab3, #tab4").removeClass("tail");
            $("#tab2").addClass("tail");
        }
    });
});
$("#tab4").click(function () {
    $(window).bind("hashchange", function () {
        var loc = window.location.href; // For when Cyan tab is clicked
        if (/Cyan/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("h r p").addClass("c");
            $("#tab4").removeClass("tail");
            $("#tab3, #tab2").addClass("tail");
        }
    });
});
});

是否可以简化它？我尝试过，但到目前为止，我的尝试中的代码只是破了。

Answer 1

我假设你正在使用某种JS路由库。

试试这个：

$(document).ready(function () {
    var tabInfo = {
            Hazel: {nonTail:'#tab2',tail:'#tab3, #tab4'},
            Red: {nonTail:'#tab3,#tab2',tail:'#tab4'},
            Pink: {nonTail:'#tab3,#tab4',tail:'#tab2'},
            Cyan: {nonTail:'#tab4',tail:'#tab2,#tab3'}
    };
    function makeChanges() {
       var loc = window.location.href; 
       for(var tab in tabInfo){
           if(loc.indexOf(tab) !== -1){
             $("#tab1,#tab2,#tab3,#tab4").removeClass("h r p c").addClass(tab.toLowerCase().charAt(0));
             $(tabInfo[tab].nonTail).removeClass("tail");
             $(tabInfo[tab].tail).addClass("tail");
             break;
           }
        }
    }
    makeChanges();
    $(window).bind("hashchange", function () {
         makeChanges();
    });
});

Answer 2

这是未经测试的伪代码，因为我不确定如何测试位置部分。我尝试采用面向对象的方法解决问题，将所有选项卡配置移动到对象中。

var tabs = [{
    "id": "#tab1",
    "color": "hazel",
    "removeTabIds": "#tab1,#tab2,#tab3,#tab4",
    "removeClasses": "r p c",
    "addClasses": "h",
    "removeTailIds": "#tab2",
    "addTailIds": "#tab3 #tab4"
}, { //Other tab configs go here ...
}];

$(document).ready(function(){
    var loc = window.location.href;
    var tab = getTab(loc);
    changeClasses(tab);
});

function getTab(loc){
    for (var i = 0; i < tabs.length; i++) {
        if (/tabs[i].color/.test(loc)) {
            return tab[i];
        }
    }
};

function changeClasses(tab){
    $(tab.removeTabIds).removeClass(tab.removeClasses).addClass(tab.addClasses);
    $(tab.removeTailIds).removeClass("tail");
    $(tab.addTailIds).addClass("tail");
};

function bindTab(tab){
    $(tab.id).click(function(){
        $(window).bind("hashchange", function(){
            var loc = window.location.href;
            var tab = getTab(loc);
            changeClasses(tab);
        });
    });
}

具有类似功能时简化Javascript

2 个答案: