替代如果，否則如果，否則如果，否則，如果等在JavaScript

我有以下的代碼，這取決於一個url參數的變化，然後隱藏窗體上的選擇選項。即www.example.com?type=images替代如果，否則如果，否則如果，否則，如果等在JavaScript

最終會有超過20個不同的參數。我想知道一個更好的方法，而不是擁有大量的如果elses。只是大綱如何做到這一點很好，我是新手，所以我想能夠接受答案並從中學習。謝謝。

var type = getURLparameter('type'); //from another function 

if (type == "images"){ 
    var selectDiv =('divid'); 
    var selectField = ('selectid'); 
    document.getElementById(selectField).options[1].selected=true; 
    document.getElementById(selectDiv).style.visibility="hidden"; 
} 
else if (type == "pizza") { 
    var selectDiv =('divid'); 
    var selectField = ('selectid'); 
    document.getElementById(selectField).options[2].selected=true; 
    document.getElementById(selectDiv).style.visibility="hidden"; 
} 
else (type == "cheese") { 
    var selectDiv =('divid'); 
    var selectField = ('selectid'); 
    document.getElementById(selectField).options[3].selected=true; 
    document.getElementById(selectDiv).style.visibility="hidden"; 
}

來源

2011-11-29 acowley

什麼[開關]（http://www.w3schools.com/js/js_switch.asp）？ –

我會格式化您的HTML和這樣的東西，以便您不需要特殊情況下的一切。 – Blender

我必須同意Blender的評論。如果你的結構做得好，你不需要if-elses *或* switch語句。 –

在不重複代碼的興趣，我會寫你的代碼像這與該指數NUM查找表，並且每個選項沒有重複的代碼：

var typeNum = { 
    images: 1, 
    pizza: 2, 
    cheese: 3 
}; 

var type = getURLparameter('type'); 

if (type in typeNum) { 
    document.getElementById('selectid').options[typeNum[type]].selected = true; 
    document.getElementById('divid').style.visibility = "hidden"; 
}

來源

2011-11-29 01:23:56 jfriend00

我很確定這就是我要找的。謝謝！ – acowley

也許switch聲明將幫助您

http://www.tutorialspoint.com/javascript/javascript_switch_case.htm

還設置之前的所有selectDiv減少代碼:)

switch(type) { 
    case 'images': 
     //blah 
     break; 
}

來源

2011-11-29 01:16:57 tekknolagi

哦....他們錯了，但是開關是正確的 – tekknolagi

@PHPBree那裏，修好了！ – tekknolagi

@AlienWebguy我也這麼認爲，但他是對的 – tekknolagi

使用一個開關量：

var selectDiv = document.getElementById('divid'), 
    selectField = document.getElementById('selectid'); 

switch(type){ 
    case "images": 
     selectField.options[1].selected=true; 
     selectDiv.style.visibility="hidden"; 
    break; 

    case "pizza": 
     selectField.options[2].selected=true; 
     selectDiv.style.visibility="hidden"; 
    break; 

    case "cheese": 
     selectField.options[3].selected=true; 
     selectDiv.style.visibility="hidden"; 
    break; 
}

來源

2011-11-29 01:19:47 AlienWebguy

重複的代碼可以從switch語句中移出。 – jfriend00

爲什麼downvote？這個答案沒用嗎？ – AlienWebguy

downvote不是我。我認爲低估應該需要一些解釋。 – jfriend00

將它們放在一個對象中，並查找所需的一個。

var type_table = { 
    images: { 
     div_id: 'somevalue', 
     select_id: 'somevalue', 
     option_index: 0 
    }, 

    pizza: { 
     div_id: 'somevalue', 
     select_id: 'somevalue', 
     option_index: 1 
    }, 

    cheese: { 
     div_id: 'somevalue', 
     select_id: 'somevalue', 
     option_index: 2 
    } 
};

然後...

var the_type = type_table[ type ]; 

document.getElementById(the_type.select_id).options[the_type.option_index].selected=true; 
document.getElementById(the_type.div_id).style.visibility="hidden";

如果ID其實都是一樣的，那麼自然應該緩存這些元素，而不是重新選擇他們，唯一你需要存儲在該表將是索引號。

這聽起來像唯一的獨特部分是索引。如果是這樣，這樣做：

var type_table = { 
    images:0, 
    pizza:1, 
    cheese:2, // and so on 
}; 

var the_div = document.getElementById('div_id'); 
var the_select = document.getElementById('select_id');

然後運行該代碼的函數內...

the_select.options[ type_table[ type ] ].selected=true; 
the_div.style.visibility="hidden";

來源

2011-11-29 01:20:36 RightSaidFred

也使用了一些這種解決方案。如果我有更多的代表。我肯定會贊成。謝謝你的幫助。 – acowley

document.getElementById(selectField).options[(type == "images" ? 1 : (type == "pizza" ? 2 : 3))].selected=true; 
document.getElementById(selectDiv).style.visibility="hidden";

來源

2011-11-29 01:23:22 Godwin

你可以使用的功能的陣列，類似於以往普惠在c＃ - [R字典溶液，

var mySwitch={}; 
mySwitch['images'] = function(){ 
    var selectDiv =('divid'); 
    var selectField = ('selectid'); 
    document.getElementById(selectField).options[1].selected=true; 
    document.getElementById(selectDiv).style.visibility="hidden"; 
}; 
mySwitch['pizza'] = function(){...};

然後執行

mySwitch[type]();

來源

2011-11-29 01:29:33

替代如果，否則如果，否則如果，否則，如果等在JavaScript

回答

相關問題