2016-03-22 3 views
-2

Сегодня я код JavaScript, но он действительно выглядит не очень хорошо. Так как я могу оптимизировать его с хорошим расширить и отыскать вкусныеКод оптимизирован, как его хорошо выглядеть

if($("#active-flg").val() == 'clubInfo') { 
    $("[name='local-li']:eq(0)").addClass("active"); 
    $("[name='local-li']:eq(1)").removeClass("active"); 
    $("[name='local-li']:eq(2)").removeClass("active"); 

    $("#manage-club-info").addClass("active"); 
    $("#manage-club-config").removeClass("active"); 
    $("#manage-club-phone").removeClass("active"); 

} else if($("#active-flg").val() == 'clubSeo') { 
    $("[name='local-li']:eq(0)").removeClass("active"); 
    $("[name='local-li']:eq(1)").addClass("active"); 
    $("[name='local-li']:eq(2)").removeClass("active"); 

    $("#manage-club-info").removeClass("active"); 
    $("#manage-club-seo").addClass("active"); 
    $("#manage-club-phone").removeClass("active"); 

} else if($("#active-flg").val() == 'clubPhone') { 
    $("[name='local-li']:eq(0)").removeClass("active"); 
    $("[name='local-li']:eq(1)").removeClass("active"); 
    $("[name='local-li']:eq(2)").addClass("active"); 

    $("#manage-club-info").removeClass("active"); 
    $("#manage-club-seo").removeClass("active"); 
    $("#manage-club-phone").addClass("active"); 
} 
+4

Если код работает, и вы хотите, чтобы он рассмотрел, [codereview.se] это место, чтобы спросить. – Tushar

+1

@NattyQ вы также можете поделиться html – brk

ответ

1

Хотя это не обзор кода,

var flags = ['clubInfo', 'clubSeo', 'clubPhone'] 
var targets = ['#manage-club-info','#manage-club-seo','#manage-club-phone'] 
var val = $("#active-flg").val(); 
var index = flags.indexOf(val); 

if (index >= 0){ 
    $("[name='local-li']").removeClass("active"); 
    $(targets.join(',')).removeClass("active"); 

    var activeLi = "[name='local-li']:eq("+ index +")"; 
    $(activeLi).addClass("active"); 
    $(targets[index]).addClass("active");  
} 
1

Попробуйте это ..

if($("#active-flg").val() == 'clubInfo') { 
    removeClass(["[name='local-li']:eq(1)","[name='local-li']:eq(2)","#manage-club-config","#manage-club-phone"]); 
    addClass(["[name='local-li']:eq(0)","#manage-club-info"]) 

} else if($("#active-flg").val() == 'clubSeo') { 
    removeClass(["[name='local-li']:eq(0)","[name='local-li']:eq(2)","#manage-club-info","#manage-club-phone"]); 
    addClass(["[name='local-li']:eq(1)","#manage-club-seo"]) 

} else if($("#active-flg").val() == 'clubPhone') { 
    removeClass(["[name='local-li']:eq(0)","[name='local-li']:eq(1)","#manage-club-info","#manage-club-seo"]); 
    addClass(["[name='local-li']:eq(2)","#manage-club-phone"]); 
} 


function addClass(arraySelectors){ 
    for (selector in arraySelectors){ 
     $(arraySelectors[selector]).addClass("active"); 
    } 
} 

function removeClass(arraySelectors){ 
    for (selector in arraySelectors){ 
     $(arraySelectors[selector]).removeClass("active"); 
    } 
} 
1

Что об этом

var actions = { 
    clubInfo: function(){ 
     $("[name='local-li']:eq(0)").addClass("active"); 
     $("[name='local-li']:eq(1)").removeClass("active"); 
     $("[name='local-li']:eq(2)").removeClass("active"); 

     $("#manage-club-info").addClass("active"); 
     $("#manage-club-config").removeClass("active"); 
     $("#manage-club-phone").removeClass("active"); 

    }, 
    clubSeo: function(){ 
     $("[name='local-li']:eq(0)").removeClass("active"); 
     $("[name='local-li']:eq(1)").addClass("active"); 
     $("[name='local-li']:eq(2)").removeClass("active"); 

     $("#manage-club-info").removeClass("active"); 
     $("#manage-club-seo").addClass("active"); 
     $("#manage-club-phone").removeClass("active"); 
    }, 
    clubPhone: function(){ 
     $("[name='local-li']:eq(0)").removeClass("active"); 
     $("[name='local-li']:eq(1)").removeClass("active"); 
     $("[name='local-li']:eq(2)").addClass("active"); 

     $("#manage-club-info").removeClass("active"); 
     $("#manage-club-seo").removeClass("active"); 
     $("#manage-club-phone").addClass("active"); 
    } 
} 
var action = $("#active-flg").val(); 
if(actions[action]) { 
    actions[action](); 
} else { 
    sexyDefaultFunction(); 
} 
1

Ваш код несколько видов o f избыточным, что не очень хорошо. Одной из основополагающих причин существования компьютеров является устранение избыточности.

Что вы хотите делать, это найти способы перебора вещей, которые у вас есть, и оставить избыточность на компьютере или еще лучше, но просто избавиться от избыточности и использовать только те значения, которые вам нужны. AKA вместо:

if(var == "bread") { 
    $("#bread").addClass("active"); 
} 

if(var == "milk") { 
    $("#milk").addClass("active"); 
} 

if(var == "eggs") { 
    $("#eggs").addClass("active"); 
} 

Вы хотите что-то вроде:

$("#" + var).addClass("active"); 
+0

Спасибо за ваши идеи. – NattyQ

+0

Не столько мои идеи, сколько фундаментальные аспекты информатики, не проблема! Эти вещи вступают в контекст, тем больше вы делаете. – JackHasaKeyboard

Смежные вопросы