重构大块链接的if-else语句 [英] Refactoring a large block of chained if-else statements

问题描述

这似乎有些矫kill过正，我想重构这个...任何建议

This seems like overkill and I would like to refactor this...any suggestions

    if($(this).text() == "Grocery"){
        $(".type_changer").attr("id", "gro");
    }else if($(this).text() == "Restaurant"){
        $(".type_changer").attr("id", "res");
    }else if($(this).text() == "Bar"){
        $(".type_changer").attr("id", "bar");
    }else if($(this).text() == "Pizza Delivery"){
        $(".type_changer").attr("id", "piz");
    }else if($(this).text() == "Quick Service"){
        $(".type_changer").attr("id", "qui");
    }else if($(this).text() == "Retail"){
        $(".type_changer").attr("id", "ret");
    }else if($(this).text() == "Salon"){
        $(".type_changer").attr("id", "sal");
    }
    if($(this).attr("id").slice(-1) == 1){
        $(".number_changer").attr("id", "one1");
    }else if($(this).attr("id").slice(-1) == 2){
        $(".number_changer").attr("id", "two2");
    }else if($(this).attr("id").slice(-1) == 3){
        $(".number_changer").attr("id", "three3");
    }else if($(this).attr("id").slice(-1) == 4){
        $(".number_changer").attr("id", "four4");
    }else if($(this).attr("id").slice(-1) == 5){
        $(".number_changer").attr("id", "five5");}

推荐答案

看这里

if($(this).text() == "Grocery"){
    $(".type_changer").attr("id", "gro");
}else if($(this).text() == "Restaurant"){
    $(".type_changer").attr("id", "res");
}else if($(this).text() == "Bar"){
    $(".type_changer").attr("id", "bar");
}else if($(this).text() == "Pizza Delivery"){
    $(".type_changer").attr("id", "piz");
}else if($(this).text() == "Quick Service"){
    $(".type_changer").attr("id", "qui");
}else if($(this).text() == "Retail"){
    $(".type_changer").attr("id", "ret");
}else if($(this).text() == "Salon"){
    $(".type_changer").attr("id", "sal");
}

您必须考虑所有重复.会剩下什么?正确，文字和ID值:

You have to think all the repetitions away. What would left over? Right, the text and id values:

"Grocery", "gro"
"Restaurant", "res"
"Bar", "bar"
"Pizza Delivery", "piz"
"Quick Service", "qui"
"Retail", "ret"
"Salon", "sal"

让它们保留在某些数据结构中.一个对象是显而易见的选择.

Let hold them in some data structure. An object is an obvious choice.

var types = {
    "Grocery": "gro",
    "Restaurant": "res",
    "Bar": "bar",
    "Pizza Delivery": "piz",
    "Quick Service": "qui",
    "Retail": "ret",
    "Salon": "sal"
}

可以像使用动态键的关联数组一样对其进行访问.现在您可以使用一行:

It can be accessed like an associative array with dynamic keys. Now you can use a single line:

$(".type_changer").attr("id", types[$(this).text()]);

第二部分的替换方法留给您练习，但归根结底是相同的.

How to replace the second part is left as exercise to you, but it boils down to the same.

更新:您似乎有一个硬时间来了解这一点.这是我这边的解释:

Update: you seem to have a hard time in understanding this. Here's an explanation from my side:

$(this).text()返回"Grocery"时，以上内容将解析为

When $(this).text() returns "Grocery", the above will resolve to

$(".type_changer").attr("id", types["Grocery"]);

types["Grocery"]将依次返回"gro"，因此它基本上以

The types["Grocery"] will in turn return "gro", so it basically ends up as

$(".type_changer").attr("id", "gro");

$(this).text()为"Grocery"时.

• JavaScript对象表示法(JSON)教程

这篇关于重构大块链接的if-else语句的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！