[英]Javascript repeating if statements better solution?
我有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中最优雅的方式来做到这一点? 有没有更好的办法?
您可以创建一个带有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"/>
怎么样-顺序无关紧要,超级灵活和紧凑。
var defaults = {
"#input1": "something here",
"#input2": "...",
"#input3": "..."
};
for (var id in defaults) {
var currVal = $(id).val();
$(id).val(currVal.trim() || defaults[id]);
}
我们可以通过检查字段并放入默认值的操作来提取抽象。
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);
}
您可以使用.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'>
尝试使用简单的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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.