비슷한 기능을 수행 할 때 자바 스크립트 단순화

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