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

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"/>