javascript - 简单函数只能运行一次(显示/隐藏 div)

javascript - 简单函数只能运行一次(显示/隐藏 div) - vanilla JavaScript

转载作者：行者123 更新时间：2023-12-02 22:03:47

我正在开发一个多语言网站。

我希望能够按下一个按钮，并且所有(包装内容)div 的显示变为无，并且仅显示正确的一个变成 inline-block。

它有效。但只有一次。问题是什么？请不要使用 JQuery。

编辑向 html 添加了一些代码，使其“易于理解”

JS(toSl、toAn 等所有函数都是相同的)。

function toRu () {
    var lngs, i;
    lngs = document.querySelectorAll(".lng");
    for (var i=0;i<lngs.length;i++){
        lngs[i].style.display="none";
    }
    document.getElementById("ru").style.display="inline-block";
}

document.getElementById("slo").addEventListener("click", toSl);
document.getElementById("ang").addEventListener("click", toAn);
document.getElementById("nem").addEventListener("click", toNe);
document.getElementById("ita").addEventListener("click", toIt);
document.getElementById("hrv").addEventListener("click", toHr);
document.getElementById("rus").addEventListener("click", toRu);

HTML

<!DOCTYPE html>
<html>
<body>
<div class="lng" id="sl">
<nav>
<div id="lngSpace">
    Language Selector
    <input type="button" id="slo" class="zastave" value="Slo">
    <input type="button" id="ang" class="zastave" value="Eng">
    <input type="button" id="nem" class="zastave" value="Deu">
    <input type="button" id="ita" class="zastave" value="Ita">
    <input type="button" id="hrv" class="zastave" value="Hrv">
    <input type="button" id="rus" class="zastave" value="Rus">
</div>
</nav>
Content of the page in Sl language
</div>

<div class="lng" id="en">
<nav>
<div id="lngSpace">
    Language Selector
    <input type="button" id="slo" class="zastave" value="Slo">
    <input type="button" id="ang" class="zastave" value="Eng">
    <input type="button" id="nem" class="zastave" value="Deu">
    <input type="button" id="ita" class="zastave" value="Ita">
    <input type="button" id="hrv" class="zastave" value="Hrv">
    <input type="button" id="rus" class="zastave" value="Rus">
</div>
</nav>
Content of the page in En language
</div>

<div class="lng" id="de">
<nav>
<div id="lngSpace">
    Language Selector
    <input type="button" id="slo" class="zastave" value="Slo">
    <input type="button" id="ang" class="zastave" value="Eng">
    <input type="button" id="nem" class="zastave" value="Deu">
    <input type="button" id="ita" class="zastave" value="Ita">
    <input type="button" id="hrv" class="zastave" value="Hrv">
    <input type="button" id="rus" class="zastave" value="Rus">
</div>
</nav>
Content of the page in Ger language
</div>

etc etc

</body>
</html>

编辑我的代码还包含这段在最开始运行的JS。我不认为它会影响 JS 的其余部分，因为我只想更改 div 的显示而不重新加载页面...但我只是将其发布以防万一(就像发布到 plnkr 的示例一样)有效...)

var language = navigator.language || navigator.languages[0];
console.log(language);
var languageFistTwo = language.substr(0,2); // To only keep the first 2 characters.
console.log(languageFistTwo);

switch (languageFistTwo) {
    case "sl":
        document.getElementById("sl").style.display="inline-block";
        break;  
    case "en":
        document.getElementById("en").style.display="inline-block";
        break;
    case "de":
        document.getElementById("de").style.display="inline-block";
        break;
    case "it":
        document.getElementById("it").style.display="inline-block";
        break;
    case "hr":
        document.getElementById("hr").style.display="inline-block";
        break;
    case "ru":
        document.getElementById("ru").style.display="inline-block";
        break;
    default:
        document.getElementById("en").style.display="inline-block";
        break;
}

示例:https://plnkr.co/edit/FWsUfBzRp1yuS4WKDTIw?p=info

最佳答案

这是我假设您正在尝试做的事情的编辑示例。如果你想运行你的示例，你必须在按钮上使用 class 而不是 id 和所有图像的 click 监听器，而不仅仅是第一组。

无论哪种方式，您都可以在一个函数中解决所有问题。您不需要为每种语言提供一个函数。

注释和解释在代码中。

//function toRu(){
function toAny(){
    var lngs = document.querySelectorAll(".lng");
    for (var i=0;i<lngs.length;i++){
        //REM: The element with the matching id is inline-block, the others none
        lngs[i].style.display = lngs[i].getAttribute('data-id') == this.value ? 'inline-block' : 'none'
    }
}

//REM: This only assings the event to one button
/*
document.getElementById("slo").addEventListener("click", toAny);
document.getElementById("ang").addEventListener("click", toAny);
document.getElementById("nem").addEventListener("click", toAny);
document.getElementById("ita").addEventListener("click", toAny);
document.getElementById("hrv").addEventListener("click", toAny);
document.getElementById("rus").addEventListener("click", toAny);
*/

for(var tL=document.querySelectorAll('input.zastave'), i=0, j=tL.length; i<j; i++){
  tL[i].addEventListener("click", toAny);
}

<!--
I do not know why you replicated the language selectors multiple times. For me this structure makes more sense.
-->
<nav>
  <input type="button" id="slo" class="zastave" value="Slo">
  <input type="button" id="ang" class="zastave" value="Eng">
  <input type="button" id="nem" class="zastave" value="Deu">
  <input type="button" id="ita" class="zastave" value="Ita">
  <input type="button" id="hrv" class="zastave" value="Hrv">
  <input type="button" id="rus" class="zastave" value="Rus">
</nav>
<!--
id should be unique. Therefore I changed it to data-id and made it match the values of the buttons. This allows us to easily toggle the right divs in one function
-->
<div class="lng" data-id="Slo">
Content of the page in Sl language
</div>

<div class="lng" data-id="Eng">
Content of the page in En language
</div>

<div class="lng" data-id="Deu">
Content of the page in Ger language
</div>

关于javascript - 简单函数只能运行一次(显示/隐藏 div) - vanilla JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59787499/

文章推荐： javascript - React props 和 states-值不更新

文章推荐： javascript - 如何从 Javascript 检查浏览器是否缓存了资源？

perl - 只能 'perl6'解析Perl 6吗？
有一条(相对)众所周知的 Perl 公理:“只有 Perl 可以解析 Perl”。我想知道 Perl 6 是否仍然如此？扩大讨论...考虑到 PyPy 最近的更新，我想到了这个问题。 Perl 独特
javascript - 为什么我*只能*访问 setInterval 内的对象属性？
这是设置。在上一个问题中，我发现我可以通过子组件中的状态传递对象属性，然后使用 componentDidUpdate 获取该对象属性。在这种情况下，状态和属性都称为到达。这是基本代码... expo
java - 为什么 IntelliJ 只能 'compile' 某些资源？
我运行的是 10.5.2 社区版。我已经标记了源/主要/资源作为源目录。我可以右键单击并“编译”某些文件，据我所知，这意味着 IDE 将文件复制到与发送类文件的“com.mydomain.pack

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 简单函数只能运行一次(显示/隐藏 div) - vanilla JavaScript