Question

Bugün, bazı JavaScript kodları yazıyor, ancak gerçekten iyi görünmüyor. Bu yüzden iyi ile optimize nasıl bu deneyin genişletmek ve lezzetli

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

Answer 1

hakkında bu kod incelemesi olmasa da,

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

Answer 2

bakmak ..

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

Answer 3

Bunun

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

Answer 4

Sizin kodunuz çok çeşitli o f gereksiz, iyi değil. Bilgisayarların var olmasının en temel nedenlerinden biri, artıklığı ortadan kaldırmaktır.

Yapmak istediğiniz şey, tekrarlı olarak sahip olduğunuz şeylerin üzerinde yineleme ve artıklığı bilgisayara bırakma ya da daha iyisi artık yedeklemeyi ve sadece ihtiyacınız olan değerlerle uğraşmayı daha iyi bir hale getirmenin yollarını bulmaktır. AKA yerine:

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

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

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

Sen gibi bir şey istiyor: [codereview.se], kod çalışıyor ve bunu gözden almak istiyorsanız

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