Question

我有3个输入，代码检查它们是否为空，如果是，则将变量值添加到输入中。

所以我有3个带值的变量：

var input1text = "something here";
var input2text = "something else here";
var input3text = "something else 2 here";

因此，当页面加载时，我会检查输入是否为空，如果是，我将变量值添加到输入中。

像这样：

if($('#input1').val() == '') {

    //Add input1text text to it

}

if($('#input2').val() == '') {

    //Add input2text text to it

}


if($('#input3').val() == '') {

    //Add input3text text to it

}

我的问题是，它有多个if最优雅的方法吗？还有更好的方法吗？

Answer 1

您可以创建一个对象，其中包含html元素的ID，并指定其默认值：

var inputDefaultValues = {
    "input1": "something here",
    "input2": "something else here",
    "input3":  "something else 2 here"
};

然后你可以遍历这个对象的键，检查相应元素的值是否为空，如果它是空的，则为默认值：

Object.keys(inputDefaultValues)
      .forEach(function(key){
          var inputElement = document.getElementById(key);
          if(inputElement.value === ''){
              inputElement.value = inputDefaultValues[key];
          }
      });

var inputDefaultValues = {
    "input1": "something here",
    "input2": "something else here",
    "input3":  "something else 2 here"
};

Object.keys(inputDefaultValues)
      .forEach(function(key){
          var inputElement = document.getElementById(key);
          if(inputElement.value === ''){
              inputElement.value = inputDefaultValues[key];
          }
      });

<input type="text" id="input1"/>
<input type="text" id="input2"/>
<input type="text" id="input3"/>

Answer 2

这个怎么样 - 订单并不重要，超级灵活，超级紧凑。

var defaults = {
   "#input1": "something here",
   "#input2": "...",
   "#input3": "..."
};

for (var id in defaults) {
   var currVal = $(id).val();
   $(id).val(currVal.trim() || defaults[id]);
}

Answer 3

我们可以在检查字段和设置默认值的操作中提取抽象。

var fields = [{
    selector: "#input1",
    defaultVal: "default1"
}, {
    selector: "#input2",
    defaultVal: "default2"
}, {
    selector: "#input3",
    defaultVal: "default3"
}
];

var setDefault = function (selector, default) {
    if($(selector).val() == '') {
        $(selector).val(default);
    }
}

for (var i = 1; i < fields.length; i++) {
    var field = fields[i];
    setDefault(field.selector, field.defaultVal);
}

Answer 4

您可以使用.each()检查每个输入，如果它是空的 - 从包含值的数组中指定相应的值。

var inputs = ['something here', 'something else here', 'something else 2 here'];
    
    $('input').each(function(i){
      $(this).val() == '' ? $(this).val(inputs[i]) : null;
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='input1' value='x'>
<input id='input2'>
<input id='input3'>

var inputs = {input1:'something here', input2:'something else here', input3: 'something else 2 here'};
    
    $('input').each(function(i){
      $(this).val() == '' ? $(this).val(inputs[$(this).attr('id')]) : null;
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='input1' value='x'>
<input id='input2'>
<input id='input3'>

Answer 5

尝试使用简单的forEach和querySelector()来获取纯JavaScript

＆＃13;

var input1text = 'something here';
var input2text = 'something else here';
var input3text = 'something else 2 here';

document.querySelectorAll('input').forEach(function(a,b){
a.value = a.value ?  a.value :window['input'+(b+1)+'text'] ;
})

＆＃13;

<input id="1" value="dddddddd"><input id="2"><input id="3">

＆＃13;

Javascript重复if语句更好的解决方案？

5 个答案: