我有五个输入字段。首先,从中删除内容时,首先用输入字段2填充第一个输入字段,然后输入字段5为空。同样,如果您从第一个输入字段中删除内容,则第二个内容将从第一个输入内容中删除,现在您将输入字段4和5留空。我需要五个输入字段消失,只剩下一个空的输入字段。然后,如果第三个和第四个元素为空,则第四个元素应消失,依此类推,直到只剩下第一个输入字段。因此,我用硬编码值解决了这个问题:
if ((document.getElementsByClassName('requestRightsTitle4')[0].value == '')
&& (document.getElementsByClassName('requestRightsEmail4')[0].value == ''))
{
displayInputField('none', 5);
}
if (
(document.getElementsByClassName('requestRightsTitle3')[0].value == '')
&& (document.getElementsByClassName('requestRightsEmail3')[0].value == '')
&& (document.getElementsByClassName('requestRightsTitle4')[0].value == '')
&& (document.getElementsByClassName('requestRightsEmail4')[0].value == '')
)
{
displayInputField('none', 4);
}
if (
(document.getElementsByClassName('requestRightsTitle2')[0].value == '')
&& (document.getElementsByClassName('requestRightsEmail2')[0].value == '')
&& (document.getElementsByClassName('requestRightsTitle3')[0].value == '')
&& (document.getElementsByClassName('requestRightsEmail3')[0].value == '')
&& (document.getElementsByClassName('requestRightsTitle4')[0].value == '')
&& (document.getElementsByClassName('requestRightsEmail4')[0].value == '')
)
{
displayInputField('none', 3);
}
现在我想像一个真正的程序员一样缩短这段代码,但是我没有时间(将我发送到另一个项目)或技能。但是我真的很想学习这是怎么可能的,比如:
for (let i = 0; i < 5; i++) {
if (document.getElementsByClassName('requestRightsTitle' + i)[0].value == ''
&& document.getElementsByClassName('requestRightsEmail' + i)[0].value == '')
displayInputField('none', (i+1));
}
答案 0 :(得分:1)
只想选择第一个元素时,最好使用querySelector
。我将使用每个元素的值制作一个对象,然后检查对象值:
const valsAreEmpty = ...vals => vals.every(val => val === '');
const vals = [
'requestRightsEmail2',
'requestRightsEmail3',
'requestRightsEmail4',
'requestRightsTitle2',
'requestRightsTitle3',
'requestRightsTitle4',
].map(classStr => document.querySelector('.' + classStr).value);
if (valsAreEmpty(
vals.requestRightsTitle4,
vals.requestRightsEmail4
)) {
displayInputField('none', 5);
}
if (valsAreEmpty(
vals.requestRightsTitle3,
vals.requestRightsEmail3,
vals.requestRightsTitle4,
vals.requestRightsEmail4
)) {
displayInputField('none', 4);
}
// etc
如果还有更多Email#
和Title#
元素,则可以使用循环来创建val
。
答案 1 :(得分:1)
您可以在所有输入字段上设置一个侦听器。如果某个字段为空,则将所有剩余值向左移动,并确定需要显示哪些字段(即,所有具有值的字段和第一个空白字段)。
这是完整的独立代码段:
const action = (inputs) => {
const listener = () => {
const values = inputs.map(input => input.value).filter(v => v);
inputs.forEach((input, i) => {
input.value = values[i] || '';
input.style.display = values[i] || !i || values[i - 1] ? '' : 'none';
});
};
inputs.forEach((input, i) => input.addEventListener('input', listener));
};
action([...document.querySelectorAll('input')]);
<input value="One">
<input value="Two">
<input value="Three">
<input value="Four">
<input value="Five">
答案 2 :(得分:1)
一些评论:
您可以更通用地使用html类:
<input class="requestRightsTitle" />
<input class="requestRightsEmail" />
<input class="requestRightsTitle" />
<input class="requestRightsEmail" />
<input class="requestRightsTitle" />
<input class="requestRightsEmail" />
<input class="requestRightsTitle" />
<input class="requestRightsEmail" />
在javascript方面:document.getElementsByClassName('requestRightsEmail')
将为您提供有用的数组:
let emailInputs = document.getElementsByClassName('requestRightsEmail');
emailInputs[0].value = ...
emailInputs[1].value = ...
emailInputs[2].value = ...
...
// note : this array will be 0-indexed.
// emailInputs[0] will match your 'requestRightsEmail1'
这可能也会在CSS方面为您提供帮助。
例如:
let titles = document.getElementsByClassName('requestRightsTitle')
.map( e => e.value )
let emails = document.getElementsByClassName('requestRightsEmail')
.map( e => e.value )
// as said above : '3' matches 'requestRights4'
if (titles[3] == '' && emails[3] == '') {
displayInputField('none', 5);
}
if ( titles[2] == '' && emails[2] == ''
&& titles[3] == '' && emails[3] == '') {
displayInputField('none', 4);
}
然后您可以更轻松地将此循环
关于样本的功能以及如何重写它的最后说明:
如果requestRightsEmail3
不为空,则您已经知道所有包含requestRightsEmail3
的测试都将返回false
。
另一种查看循环的方式是:
如果i
是 not 为空,请在此处停止,否则,显示这些多余的字段:
for (let i = 3; i >= 1; i--) { // <- decreasing loop
// if one field contains something, stop here :
if (emails[i] != '' || titles[i] != '') {
break;
}
// otherwise : call your displayInputFields
displayInputField('none', i);
}