Question

今天，我编写了一些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");
}

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

Answer 2

这个怎么样？

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 3

虽然这不是代码审查，但

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 4

你的代码是多种多余的，这是不好的。计算机存在的最根本原因之一是消除冗余。

你想要做的是找到迭代你递归的东西的方法，把冗余留给计算机或者更好，只是回避冗余，只处理你需要的值。 AKA代替：

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

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

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

你想要这样的东西：

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

代码优化，如何使其看起来很好

4 个答案: