Question

这就是我所拥有的：

(category=="Ljud & Bild")?byId("nav_sub_ljud_bild").style.display='block' :  byId("nav_sub_ljud_bild").style.display='none';
(category=="Datorer")?byId("nav_sub_datorer").style.display='block' :  byId("nav_sub_datorer").style.display='none';
(category=="Telefoner & Fax")?byId("nav_sub_telefoner").style.display='block' :  byId("nav_sub_telefoner").style.display='none';

(category=="Överlåtelser")?byId("nav_sub_overlatelser").style.display='block' :  byId("nav_sub_overlatelser").style.display='none';
(category=="Fastigheter & Lokaler")?byId("nav_sub_fastigheter").style.display='block' :  byId("nav_sub_fastigheter").style.display='none';
(category=="Inventarier/Inredning")?byId("nav_sub_inventarier").style.display='block' :  byId("nav_sub_inventarier").style.display='none';
(category=="Tjänster")?byId("nav_sub_tjanster").style.display='block' :  byId("nav_sub_tjanster").style.display='none';

(category=="Resor & Biljetter")?byId("nav_sub_resor").style.display='block' :  byId("nav_sub_resor").style.display='none';
(category=="Sport & Träning")?byId("nav_sub_sport").style.display='block' :  byId("nav_sub_sport").style.display='none';
(category=="Böcker & Litteratur")?byId("nav_sub_litteratur").style.display='block' :  byId("nav_sub_litteratur").style.display='none';
(category=="Djur")?byId("nav_sub_djur").style.display='block' :  byId("nav_sub_djur").style.display='none';
(category=="Musik-Instrument")?byId("nav_sub_musik_instrument").style.display='block' :  byId("nav_sub_musik_instrument").style.display='none';
(category=="Hobby & Samlarobjekt")?byId("nav_sub_samlarobjekt").style.display='block' :  byId("nav_sub_samlarobjekt").style.display='none';
(category=="Smycken & Klockor")?byId("nav_sub_juveler").style.display='block' :  byId("nav_sub_juveler").style.display='none';
(category=="Leksaker & Barn-artiklar")?byId("nav_sub_leksaker_barn").style.display='block' :  byId("nav_sub_leksaker_barn").style.display='none';
(category=="Vuxen-plagg")?byId("nav_sub_vuxen_plagg").style.display='block' :  byId("nav_sub_vuxen_plagg").style.display='none';

你会怎么写这个？以上看起来很“丑陋”！

由于

Answer 1

我假设这是PHP生成的JavaScript。为了保持可维护的PHP文件，我将执行以下操作：

<script type="text/javascript">
 function element_hide(id) { document.getElementById(id).style.display = "none"}
 function element_show(id) { document.getElementById(id).style.display = "block"}
</script>

<?php

$categories = array(

   // Insert all categories here. If a new property comes along
   // (e.g. "active/inactive") we can easily add it.
   array("label" => "Smycken & Klockor", "id" => "nav_sub_juveler"),
   array("label" => "Vuxen-plagg", "id" => "nav_sub_vuxen_plagg")
   ...

);

foreach ($categories as $category)
 {
   echo "if (category == '".$category["label"]."') ".
        "element_show('".$category["id"]."');".
        " else element_hide('".$category["id"]."');\n";
 }
?>

这并不关心输出，但是当回应条件时，可以很容易地用一些\n s和空格来美化。

Answer 2

var category_ids= {
    'Ljud & Bild': 'nav_sub_ljud_bild',
    'Datorer': 'nav_sub_datorer',
    // ...and many more...
};

for (var c in category_ids)
    byId(category_ids[c]).style.display= category===c? 'block' : 'none';

如果您不必进行静态category_ids查找，那将会更简单。是否从文本自动生成类别ID，例如。通过使用_小写和替换标点符号的跨度？如果是这样的话，你可以在那里打一堆打字。

或者，如果我们正在讨论从<select>中选择一个类别，那么您通常会在该选项的id中添加value，这可以直接映射到匹配nav。

Answer 3

我会使用字典（关联数组）并有一个简单的循环来迭代。

Answer 4

可以使用可以看作关联数组的对象来完成：

    var categories = {
        'Ljud & Bild': 'nav_sub_ljud_bild', 
        'Datorer': 'nav_sub_datorer'
    };
    var active = 'Datorer';

    for(name in categories){
        var display = (name == active) ? 'block' : 'none';
        document.getElementById(categories[name]).style.display = display;
    }

Answer 5

我想说你使用三元语句可能会使你得到的最小代码块（对我来说最干净）。我可以在不知道你的目的的情况下做出的唯一建议是将相关项放入数组中，然后通过数组进行预处理，并使用循环数组中的变量进行单个三元语句。这将使您的代码“看起来”更清晰，具有相同的净效果。

另外，它会加快你所做的改变，所以你只做一次而不是100次。

Answer 6

以下是众多方法之一 -

您可以使用组中的显示开关收集所有元素 - 例如，给它们所有相同的类名，或使它们成为唯一的标签某些父类'类别'的某种类型。

var G= byId('categories').getElementsByTagName('li');

找到一种更快捷的方法来解析您想要显示的元素 -

var cat= category.toLowerCase().split(/[/*&\-]+/);
catname= (function(){
 switch(cat[0]){
  case 'Böcker': case 'Hobby': return cat[1];
  case 'Smycken ': return 'juveler';
  case 'Leksaker': return 'leksaker_barn';
  case 'Ljud': case 'Musik': return cat.join('_');
  default: return cat[0];
 }
})();

catnamed= byId('nav_sub_'+catname);
var G= byId('categories').getElementsByTagName('li')
for(var i=0, L=G.length;i<L;i++){
 who=G[i];
 // if(who.className=='catToggle'{
 if(who== catnamed) who.style.display= 'block';
 else if(who.style.display!= 'none') who.style.display= 'none';
}

我有很多“IF / ELSE”语句，我应该这样写吗？

6 个答案: