需要摆脱许多if

时间:2012-08-24 19:14:20

标签: javascript refactoring

我的java脚本中有变量是全局的。现在每次内部函数调用时我都得到不同的值。我需要在属性中创建一个选定值的选项标签,并根据变量创建一个没有选定值的选项标签。我想这更令人困惑,让我举个例子。

var a1 = "a1c" // default value but may change

if(a1 == "all")
{
    var allstatusdefault = '<option value="all" selected="selected">All</option>';
}
else
{
    var allstatusdefault = '<option value="all" >All</option>';
}

if(a1 == "a1b")
{
    var allstatusdefault1 = '<option value="a1b" selected="selected">a1b</option>';
}
else
{
    var allstatusdefault1 = '<option value="a1b" >a1b</option>';
}

if(a1 == "a1bc")
{
    var allstatusdefault2 = '<option value="a1bc" selected="selected">a1bc</option>';
}
else
{
    var allstatusdefault2 = '<option value="a1bc" >a1bc</option>';
}

这只是示例,但我必须使用不同的值生成很多选项标记。如果有任何其他想法,我不想写很多?

5 个答案:

答案 0 :(得分:3)

提取公共代码,我在这里看到了很多重复。

var a1 = "a1c";

function buildOption(id) {
    var selected = (a1 == id? ' selected="selected"' : '');
    return '<option value="' + id + '"' + selected + '>' + id + '</option>';
}

var allstatusdefault =  buildOption('all');
var allstatusdefault1 = buildOption('a1b');
var allstatusdefault2 = buildOption('a1bc');

答案 1 :(得分:2)

我可以从这里推断出你应该做什么

var default1 = '<option value="'+a1+'" selected="selected">'+a1+'</option>';
var default2 = '<option value="'+a2+'" selected="selected">'+a2+'</option>';

由于a1的值在字符串中重用,因此也可以立即设置它,而不是使用多个if语句。

注意:当你有很多if语句时,它是使用switch语句的绝佳机会

答案 2 :(得分:1)

首先,了解switch...case。在您的情况下,看起来您可以通过将变量连接到字符串来简单地使用变量本身来形成字符串。

答案 3 :(得分:0)

  var a1 = "a1bc" // default value but may change
    switch(a1)
        {
        case "all" : allstatusdefault = '<option value="all" selected="selected">All</option>';break;
        case "a1b" : allstatusdefault = '<option value="a1b" selected="selected">a1b</option>'; break;
        case "a1bc" :  allstatusdefault = '<option value="a1bc" selected="selected">a1bc</option>'; break;
        default :  allstatusdefault = '<option value="all" >All</option>';break;
        }
    window.alert(allstatusdefault); ​

答案 4 :(得分:-1)

我认为从你编写代码的方式来看,你可以使用jQuery做一个。首先创建整个HTML,使用jQuery对象包含所有选项值,如下所示:

var $optionHTML = $('<option value=""> Blahblah </option>'); 现在你可以将所有jquery函数应用于这个人。所以你追加一个像这样的新选项。

$optionHTML.append('<option>...</option>')

当你完成所有的选项元素时,使用jquery选择器方法来查找一个元素,其中value属性与a1c匹配,然后添加属性selected,那么你就完成了。

如果您需要一些初学者代码,请告诉我。

感谢。

编辑:

这是答案

<html>
<head>
    <script type = "text/javascript" src= "http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type = "text/javascript">
        $(document).ready (function () {
            var value = "test 2";
            $select = $("<select></select>");
            $optionHTML1 = $('<option value="test 1">Test 1</option>');
            $optionHTML2 = $('<option value="test 2">Test 2</option>');
            $optionHTML1.appendTo($select); 
            $optionHTML2.appendTo($select);
            $select.find("[value='test 2']").attr('selected','selected');
            alert($select.html());  
            $("div").append($select);
        });
    </script>
    <style type = "text/css">
    </style>
</head>
<body>
    <div>
    </div>
</body>