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

我有3个输入和代码检查是否它们是空的，并且如果它们则变量值被添加到输入端。JavaScript重复if语句更好的解决方案？

所以我有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中最优雅的方式来做到这一点？有没有更好的办法？

来源

2017-04-01 gibb2017

为什么，如果你在第一个自己设定的文本输入其他2执行？ – mehulmpt

可以'input1text'，'input2text'为空？ – mehulmpt

我看到的是与一些意见相同的条件3。 – PHPglue

你可以使用.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'>

来源

2017-04-01 09:24:10

这个答案中的订单问题。这并不理想。 – MyiEye

@MyiEye订单有什么问题？ –

数组中的顺序必须与dom中html元素的顺序相匹配。 – MyiEye

我们可以通过检查领域，将默认值的操作中提取的一种抽象。

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

来源

2017-04-01 09:23:53 elpddev

'setDefault'实际上没有做任何事情。你错过了默认分配 –

@YogeshMistry这是一个实现模式的例子。在评论中，分配将在注释后面// //向其添加inputText‖ – elpddev

好的。我只是希望行'$（选择器）'.val（默认）;'也 –

您可以用钥匙创建一个对象，你的HTML元素的ID和值的默认值：

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

然后哟ü可以通过这个对象的钥匙环，检查相应的元素的值是空的，如果是空aplly默认值：

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

来源

2017-04-01 09:24:26 Christos

这个怎么样 - 顺序无所谓，超级灵活，超级紧凑。

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

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

来源

2017-04-01 09:28:58 MyiEye

我可以有一个dv的理由吗？ :-D – MyiEye

这个答案似乎是精确和通用的 –

简单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">

来源

2017-04-01 09:30:48 prasanth

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

回答

相关问题