检测显示：使用 Javascript vanilla 的内联块

Question

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

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

我想知道如何使用条件语句来查看哪个 div 是可见的，以便我可以通过 index.html 取出适当的类信息。

比如用户填写英文注册页面，我知道我需要使用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

看看 - 如何使用 javascript/jquery 禁用表单中的所有内容？

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

Answer 2

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

 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 。