Question

我有五个输入字段。首先，从中删除内容时，首先用输入字段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));
}

Answer 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。

Answer 2

您可以在所有输入字段上设置一个侦听器。如果某个字段为空，则将所有剩余值向左移动，并确定需要显示哪些字段（即，所有具有值的字段和第一个空白字段）。

这是完整的独立代码段：

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

Answer 3

一些评论：

您似乎正在使用html类来识别页面中的单个元素

您可以更通用地使用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);
}

缩短JavaScript代码预告片

3 个答案: