检测显示：带有 Javascript vanilla 的内联块

Question

我有一个多语言注册页面。所有这些都在一个 HTML 文档中，每种语言都在自己的 div 中，display:none; 或 display:visible 取决于所选语言。

所有形式都是相同的，即。 <input type="email" class="email"> 在所有表单上都相同（使用不同的占位符等）。

我想知道如何使用条件语句来查看哪个 div 是可见的，这样我就可以通过索引取出适当的类信息。

比如用户填写了英文注册页面，我知道我需要使用getElementsByClassName(".email")[1].value。 （索引 1）。

或者有没有办法检测数组中的哪个元素具有实际的内容/值（因为特定的类数组将为空，除了 1 个条目）。

HTML

<div class="lng" id="sl">
    <div class="registerTitle">
        Slo - Register
    </div>
    <div class="registerForm">
        <form accept-charset="utf-8" name="mail" onsubmit="return false;" method="post" id="mail">
            <input type="text" name="fname" required maxlength="50" minlength="1" placeholder="Janez"
                   onfocus="this.placeholder = ''" onblur="this.placeholder = 'Janez'" /><br />
            <input type="text" name="lname" required maxlength="50" minlength="1" placeholder="Novak"
                   onfocus="this.placeholder = ''" onblur="this.placeholder = 'Novak'" /><br />

            <span class="radioS">Spol: </span><br /><br />
            <div class="radioC"><label><input type="radio" name="spol" value="M">Moski</label></div><br />
            <div class="radioC"><label><input type="radio" name="spol" value="Z">Zenski</label></div><br />
            <div class="radioC"><label><input type="radio" name="spol" value="O">Ostalo</label></div><br /><br />

            <input type="email" name="email" autofocus="autofocus" required placeholder="moj@email.com"
                   onfocus="this.placeholder = ''" onblur="this.placeholder = 'moj@email.com'" />
            <br />
            <input type="button" value="Submit" id="submit_ok" name="submit_ok" /> <br />
        </form>
    </div>
</div>
<div class="lng" id="en">
    <div class="registerTitle">
        Eng - Register
    </div>
    <div class="registerForm">
        <form accept-charset="utf-8" name="mail" onsubmit="return false;" method="post" id="mail">
            <input type="text" name="fname" required maxlength="50" minlength="1" placeholder="John"
                   onfocus="this.placeholder = ''" onblur="this.placeholder = 'John'" /><br />
            <input type="text" name="lname" required maxlength="50" minlength="1" placeholder="Doe"
                   onfocus="this.placeholder = ''" onblur="this.placeholder = 'Doe'" /><br />

            <span class="radioS">Gender: </span><br /><br />
            <div class="radioC"><label><input type="radio" name="spol" value="M">Male</label></div><br />
            <div class="radioC"><label><input type="radio" name="spol" value="Z">Female</label></div><br />
            <div class="radioC"><label><input type="radio" name="spol" value="O">Other</label></div><br /><br />

            <input type="email" name="email" autofocus="autofocus" required placeholder="my@email.com"
                   onfocus="this.placeholder = ''" onblur="this.placeholder = 'my@email.com'" />
            <br />
            <input type="button" value="Submit" id="submit_ok" name="submit_ok" /> <br />
        </form>
    </div>
</div>

Answer 1

这是一种检测输入数组是否有值然后登录到控制台的方法。我知道这很笼统，但我很难准确理解您的情况需要什么：

const emailInputs = Array.from(document.querySelectorAll('.email'));
  const form = document.querySelector('form');

  form.addEventListener('change', () => {
    const hasValue = emailInputs.filter((input) => input.value);
    console.log('these inputs are active...\n');
    hasValue.forEach(val => console.log(val));
  });

<form action="" method="get" class="form-example">
    <div class="form-example">
      <label for="en">English </label>
      <input type="email" name="en" id="email" class="email">
    </div>
   <div class="form-example">
      <label for="fr">French </label>
      <input type="email" name="fr" id="email2" class="email">
    </div>
    <div class="form-example">
      <label for="es">Spanish </label>
      <input type="email" name="es" id="email3" class="email">
    </div>
    <div class="form-example">
      <label for="it">Italian </label>
      <input type="email" name="it" id="email4" class="email">
    </div>
  </form>

如果您想在此设置之外使用它，可以使用 JSFiddle。

Answer 2

看看-how can I disable everything inside a form using javascript/jquery?

禁用其他表单输入可能是一个选项，因此当您提交时，未禁用的表单会提交。