Упрощение Javascript при схожих функциях

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

Это непроверенный код psuedo, потому что я не был уверен, как проверить местоположение. Я попытался применить объектно-ориентированный подход к вашей проблеме, переместив все конфигурации вкладок в объекты.

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