缩短javascript代码测试器

Question

我有五个输入字段。当您删除内容时，首先假设第一个输入字段由输入字段2填充，然后输入字段5为空。同样，如果从第一个输入字段删除内容，则第二个内容进入第一个输入字段，现在输入字段为4个和5个为空。我需要这五个输入字段消失，只留下一个空的输入字段。如果第三个和第四个元素是空的，那么forth应该消失，等等，直到只剩下第一个输入字段。所以，我用硬编码的值来解决这个问题：

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

您可以在所有输入字段上设置侦听器。如果字段已清空，则将所有剩余值移至左侧，并确定需要显示哪些字段(即所有具有值的字段和第一个空字段)。

下面是一个完整的独立片段：

​

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 2

如果只想选择第一个元素，最好使用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 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不是空的，停止在这里，否则，显示这些额外的字段：

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