Question

这看起来有点矫枉过正，我想重构一下......任何建议

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

Answer 1

看这里，

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

你必须考虑所有的重复。什么会遗留下来？对，text和id值：

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

将它们保存在某些数据结构中。对象是一个显而易见的选择。

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

可以像使用动态键的关联数组一样访问它。现在您可以使用一行：

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

如何更换第二部分作为练习留给你，但它归结为相同。

更新：您似乎有hard time in understanding this。以下是我方的解释：

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

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

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

结尾

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

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

另见：

JavaScript Object Notation (JSON) tutorial

Answer 2

开始为switch语句编写伪代码，然后想到这个：

//make your 2D array (or key->value pair if you like)
var hash = [ ["Grocery","gro"],
             ["Restaurant","res"],
             //etc....
           ];

//loop thru your text(), checking to see if it matches any 0th item in your hash
foreach(e in hash) {
    if($(this).text() == hash[e][0] {
        //aha! match found
        $(".type_changer").attr("id", hash[e][1]);
    }

}

//disclaimer : untested code, but you should get the gist of it from this

Answer 3

有一个包含值的数组（例如：Salon，Grocery）并且还包含替换（例如：sal，gro）并替换为该数组。另一种方法是简单地取前三个字母并将它们小写但是如果我们假设您要扩展列表，这可能会导致只包含2个字母然后是空格的问题，如果不是，您可以简单地小写前3个字母。如果您需要代码示例，请说：）

Answer 4

使用类而不是id 作为内包装

使用数组存储自定义文本以便以后匹配

$（'。selector'）。each（function（）{}

通过这种方式，您可以制作流程常用

使用数组替换方法

from = ['Grocery','Restaurant']
to = ['gro','res']

Answer 5

var textToVal =
{
    "Grocery" : "gro",
    "Restaurant" : "res"
    // and so on ...
};

for (var text in textToVal) {
    if ($(this).text() == text)
        $(".type_changer").attr("id", textToVal[text]);
}

重构一大串链式if-else语句

5 个答案:

另见：