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 S中最優雅的方式來做到這一點？ 有沒有更好的辦法？

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

 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'] ; }) 

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