根据元素内的类显示功能 - Javascript vanilla

【问题标题】：Display function depending on the classes inside the element - Javascript vanilla根据元素内的类显示功能 - Javascript vanilla
【发布时间】：2020-01-23 20:34:55
【问题描述】：

TLDR不知道怎么写函数onclick("sl") display content with class "sl"&& class "lng" hide everything else with class "lng" && class "(en, de, it, hr, ru)"

你好，

我正在制作一个多语言注册页面。我目前陷入困境，因为我不知道如何编写/修改一个函数，该函数将检测一个元素是否有两个特定的类（lng 类和 sl、en、de、it、hr 或 ru 类），并且取决于组合显示内容（display: none; 或display: inline-block;）。

此外，我希望占位符的内容根据所选语言而改变。

编辑工作display: none; / display: inline;

编辑过的 JS

        const lngs = document.getElementsByClassName("lng");

        function init() {
            for (var i = 0; i < lngs.length; i++) {
                lngs[i].style.display = "none";
            }
        }

        init();

        function setLanguage(language) {

        debugger
        console.log(language);
            for (var i = 0; i < lngs.length; i++) {
                if (lngs[i].className.includes(language)) {
                    lngs[i].style.display = "inline";
                } else {
                    lngs[i].style.display = "none";
                }
            }
        }

编辑的 HTML

<html>
    <head>
    </head>
    <body>
    <img class="background-image" />
        <header>
            <div class="top-nav-logo">
                <img class="top-logo" src="assets/Logo_Sava.jpg">
            </div>
            <div class="top-language">
                <div>
                    <input type="image" id="slo" class="zastave" src="assets/drzave/Slo.png" onclick="setLanguage('sl')">
                    <input type="image" id="ang" class="zastave" src="assets/drzave/Ang.png" onclick="setLanguage('en')">
                    <input type="image" id="nem" class="zastave" src="assets/drzave/Nem.png" onclick="setLanguage('de')">
                    <input type="image" id="ita" class="zastave" src="assets/drzave/Ita.png" onclick="setLanguage('it')">
                    <input type="image" id="hrv" class="zastave" src="assets/drzave/Hrv.png" onclick="setLanguage('hr')">
                    <input type="image" id="rus" class="zastave" src="assets/drzave/Rus.png" onclick="setLanguage('ru')">
                </div>
            </div>
        </header>

        <div class="pasica">
            <img src=""/>
        </div>
        <div class="center-div">
            <div class="registerTitle">
                <div class="lng si">
                    Slo - Register
                </div>
                <div class="lng en">
                    Eng - Register
                </div>
                <div class="lng de">
                    Deu - Register
                </div>
                <div class="lng it">
                    Ita - Register
                </div>
                <div class="lng hr">
                    Hrv - Register
                </div>
                <div class="lng ru">
                    Rus - Register
                </div>
            </div>
            <div class="registerForm">
                <form accept-charset="utf-8" name="form" onsubmit="return false;" method="post" id="form">
                    <input type="text" name="fname" id="fname" required maxlength="50" minlength="1" placeholder="Janez" 
                    onfocus="this.placeholder = ''" onblur="this.placeholder = 'Janez'" /><br />
                    <input type="text" name="lname" id="lname" required maxlength="50" minlength="1" placeholder="Novak" 
                    onfocus="this.placeholder = ''" onblur="this.placeholder = 'Novak'" /><br />

                    <span class="lng sl radioS">Spol: </span>
                    <span class="lng en radioS">Gender: </span>
                    <span class="lng de radioS">Spol DE: </span>
                    <span class="lng it radioS">Gendero IT: </span>
                    <span class="lng hr radioS">Spolov: </span>
                    <span class="lng ru radioS">секс: </span><br /><br />
                        <div class="radioC"><label><input type="radio" name="spol" value="M">   <span class="lng sl">Moški SI</span>
                                                                                                <span class="lng en">Moški EN</span>
                                                                                                <span class="lng de">Moški DE</span>
                                                                                                <span class="lng it">Moški IT</span>
                                                                                                <span class="lng hr">Moški HR</span>
                                                                                                <span class="lng ru">Moški RU</span>
                        </label></div><br />
                        <div class="radioC"><label><input type="radio" name="spol" value="Z">   <span class="lng sl">Ženski SI</span>
                                                                                                <span class="lng en">Ženski EN</span>
                                                                                                <span class="lng de">Ženski DE</span>
                                                                                                <span class="lng it">Ženski IT</span>
                                                                                                <span class="lng hr">Ženski HR</span>
                                                                                                <span class="lng ru">Ženski RU</span>
                        </label></div><br />
                        <div class="radioC"><label><input type="radio" name="spol" value="O">   <span class="lng sl">Ostalo SI</span>
                                                                                                <span class="lng en">Ostalo EN</span>
                                                                                                <span class="lng de">Ostalo DE</span>
                                                                                                <span class="lng it">Ostalo IT</span>
                                                                                                <span class="lng hr">Ostalo HR</span>
                                                                                                <span class="lng ru">Ostalo RU</span>
                        </label></div><br /><br />

                    <input type="email" name="email" id="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>
    </body>
</html>

HTML

<!DOCTYPE html >
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles/main.css">
        <link rel="stylesheet" type="text/css" href="styles/language.css">
        <script type="text/javascript" src="js/myScript.js"></script>
        <script type="text/javascript" src="js/language.js"></script>
        <meta charset="utf-8">
        <title>Registration</title>
    </head>
    <body>
    <img class="background-image" />
        <header>
            <div class="top-nav-logo">
                <img class="top-logo" src="assets/Logo_Sava.jpg">
            </div>
            <div class="top-language">
                <div>
                    <input type="image" id="slo" class="zastave" src="assets/drzave/Slo.png" onclick="setLanguage('sl')">
                    <input type="image" id="ang" class="zastave" src="assets/drzave/Ang.png" onclick="setLanguage('en')">
                    <input type="image" id="nem" class="zastave" src="assets/drzave/Nem.png" onclick="setLanguage('de')">
                    <input type="image" id="ita" class="zastave" src="assets/drzave/Ita.png" onclick="setLanguage('it')">
                    <input type="image" id="hrv" class="zastave" src="assets/drzave/Hrv.png" onclick="setLanguage('hr')">
                    <input type="image" id="rus" class="zastave" src="assets/drzave/Rus.png" onclick="setLanguage('ru')">
                </div>
            </div>
        </header>
        <div class="center-div">
            <div class="registerTitle">
                <div class="lng" class="sl">
                    Slo - Register
                </div>
                <div class="lng" class="en">
                    Eng - Register
                </div>
                <div class="lng" class="de">
                    Deu - Register
                </div>
                <div class="lng" class="it">
                    Ita - Register
                </div>
                <div class="lng" class="hr">
                    Hrv - Register
                </div>
                <div class="lng" class="ru">
                    Rus - Register
                </div>
            </div>
            <div class="registerForm">
                <form accept-charset="utf-8" name="form" onsubmit="return false;" method="post" id="form">
                    <input type="text" name="fname" id="fname" required maxlength="50" minlength="1" placeholder="Janez" 
                    onfocus="this.placeholder = ''" onblur="this.placeholder = 'Janez'" /><br />
                    <input type="text" name="lname" id="lname" required maxlength="50" minlength="1" placeholder="Novak" 
                    onfocus="this.placeholder = ''" onblur="this.placeholder = 'Novak'" /><br />

                    <span class="lng" class="sl" class="radioS">Spol: </span>
                    <span class="lng" class="en" class="radioS">Gender: </span>
                    <span class="lng" class="de" class="radioS">Spol DE: </span>
                    <span class="lng" class="it" class="radioS">Spol IT: </span>
                    <span class="lng" class="hr" class="radioS">Spol HR: </span>
                    <span class="lng" class="ru" class="radioS">Spol RU: </span><br /><br />
                        <div class="radioC"><label><input type="radio" name="spol" value="M">   <span class="lng" class="sl">Moški SI</span>
                                                                                                <span class="lng" class="en">Moški EN</span>
                                                                                                <span class="lng" class="de">Moški DE</span>
                                                                                                <span class="lng" class="it">Moški IT</span>
                                                                                                <span class="lng" class="hr">Moški HR</span>
                                                                                                <span class="lng" class="ru">Moški RU</span>
                        </label></div><br />
                        <div class="radioC"><label><input type="radio" name="spol" value="Z">   <span class="lng" class="sl">Ženski SI</span>
                                                                                                <span class="lng" class="en">Ženski EN</span>
                                                                                                <span class="lng" class="de">Ženski DE</span>
                                                                                                <span class="lng" class="it">Ženski IT</span>
                                                                                                <span class="lng" class="hr">Ženski HR</span>
                                                                                                <span class="lng" class="ru">Ženski RU</span>
                        </label></div><br />
                        <div class="radioC"><label><input type="radio" name="spol" value="O">   <span class="lng" class="sl">Ostalo SI</span>
                                                                                                <span class="lng" class="en">Ostalo EN</span>
                                                                                                <span class="lng" class="de">Ostalo DE</span>
                                                                                                <span class="lng" class="it">Ostalo IT</span>
                                                                                                <span class="lng" class="hr">Ostalo HR</span>
                                                                                                <span class="lng" class="ru">Ostalo RU</span>
                        </label></div><br /><br />

                    <input type="email" name="email" id="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>
    </body>
</html>

Javascript - 我目前拥有和不工作的东西

        let fname = document.getElementById("fname");
        let lname = document.getElementById("lname");
        let email = document.getElementById("email");

        function setInputs(language) {
            var jeziki;
            var i;
            jeziki = document.getElementsByClassName("lng");
            console.log(jeziki);
            for (var i=0;i<jeziki.length;i++){
                if (jeziki[i].getElementsByClassName === "sl") {    
                    fname.setAttribute('placeholder', 'Janez');
                    lname.setAttribute('placeholder', 'Novak');
                    email.setAttribute('placeholder', 'moj@email.si');
                } else if (jeziki[i].getElementsByClassName === "en"){
                    fname.setAttribute('placeholder', 'John');
                    lname.setAttribute('placeholder', 'Doe');
                    email.setAttribute('placeholder', 'my@email.com');
                } else if (jeziki[i].getElementsByClassName === "de"){
                    fname.setAttribute('placeholder', 'Comisar');
                    lname.setAttribute('placeholder', 'Rex');
                    email.setAttribute('placeholder', 'Rex@hou.dre');
                } else if (jeziki[i].getElementsByClassName === "it"){
                    fname.setAttribute('placeholder', 'Mak');
                    lname.setAttribute('placeholder', 'Aron');
                    email.setAttribute('placeholder', 'forza@email.it');
                } else if (jeziki[i].getElementsByClassName === "hr"){
                    fname.setAttribute('placeholder', 'Mirko');
                    lname.setAttribute('placeholder', 'Mirkic');
                    email.setAttribute('placeholder', 'nase@more.hr');
                } else if (jeziki[i].getElementsByClassName === "ru"){
                    fname.setAttribute('placeholder', 'Milan');
                    lname.setAttribute('placeholder', 'Rusky');
                    email.setAttribute('placeholder', 'rus@go.ru');
                } else {
                    fname.setAttribute('placeholder', 'John');
                    lname.setAttribute('placeholder', 'Doe');
                    email.setAttribute('placeholder', 'my@email.com');
                }
            }
        }

Javascript - 工作，但我不得不删除 ID 并且页面的设置是不同的（每种语言都有它自己的形式）。

        function setLanguage(language) {
            var lngs;
            var i;
            lngs = document.getElementsByClassName("lng"); //array vseh lng-jev
            console.log(lngs);
            for (var i=0;i<lngs.length;i++){
                if (lngs[i].getElementsByClassName(language) !== language) {    
                    lngs[i].style.display="none";
                } else {
                    lngs[i].style.display="inline-block";
                }
            }
        }

【问题讨论】：

  • 您是否考虑过对照班级列表进行检查？ e = element; if ( e.classList.contains('sli') &amp;&amp; e.classList.contains('Ing')) { // do some stuff } 也像这样声明你的类：class="Ing de" 而不是有 2 个单独的类元素
  • &lt;div class="lng" class="de"&gt; Deu - Register&lt;/div&gt;。在单个元素上有多个类属性，将只考虑第一类而忽略其他类。使用空间向元素添加多个类。我：e &lt;div class="lng de"&gt; Deu - Register&lt;/div&gt;.
  • @Tijmen 我还没有 =) 会试一试。
  • @random 谢谢，我不知道
  • 为什么setInputs会忽略它的参数？

标签： javascript html


【解决方案1】：

这样做的方法是首先隐藏所有内容，然后显示应该可见的元素

var hide = ".lng";
var show = ".lng.sl";

document.querySelectorAll(hide).forEach(function() {
  this.style.display = "none";
});
document.querySelectorAll(show).forEach(function() {
  this.style.display = "inline-block";
});

【讨论】：

  • 我为此设置了其他东西，但是对 html 的更改不再起作用。谢谢，试试看。
【解决方案2】： 
if (jeziki[i].getElementsByClassName === "sl")

在这里，您将函数getElementsByClassName 与字符串进行比较，字符串始终为false。

您应该检查元素是否包含所述类：

if (jeziki[i].classList.contains("sl"))

另外，最好创建一个语言到名称/电子邮件的映射数组，这样你就不必有这么多 if 条件：

var mappings = [
    {
        language: "sl",
        fname: "Janez",
        lname: "Novak"
    },
    {
        language: "hr",
        fname: "Mirko",
        lname: "Mirkic"
    }
];

然后整个代码可以更短：

jeziki = document.getElementsByClassName("lng");
mapping = mappings.find(mapping => jezik.classList.contains(mapping.language));

然后只使用映射：

fname.setAttribute('placeholder', mapping.fname);
lname.setAttribute('placeholder', mapping.lname);
email.setAttribute('placeholder', mapping.email);

【讨论】：

  • 谢谢。我会试一试。这个问题可以理解吗？有时我会把事情复杂化。
  • 谢谢。它看起来确实更易于管理 =) 目前 if (jeziki[i].classList.contains("sl")) 仍然无法正常工作。
  • 嘿。你能解释一下我将如何在函数中实现这个映射吗？我已经用工作 display: none; / display:inline; 更新了这个问题。
猜你喜欢
  • 2020-11-07
  • 2017-08-05
  • 1970-01-01
  • 1970-01-01
  • 2016-05-17
  • 1970-01-01
  • 2020-08-03
  • 1970-01-01
  • 2022-06-16
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode