[英]Javascript: Show/hide elements based on their class
我正在构建的网站上包含双语功能。 研究我使用显示/隐藏方法的选项,据我了解,与切换字符串相比,这对 SEO 更好。 我现在还想坚持使用 javascript,因为我还在学习。 我已经在 StackOverflow 中查看了几篇文章,但到目前为止还没有找到解决方案。
下面的方法适用于我创建的一个简单的测试文件,但是一旦我尝试在网站上实现它,它会在onload
以及单击按钮时显示两种语言。 我现在只使用菜单和页面的 header - 也许我需要这些更具体的元素?
我的 Html
(…)
<ul id="navlinks">
<li><a href="index.html">Home</a></li>
<li class="lang-de"><a href="angebot.html">Angebot</a></li>
<li class="lang-eng"><a href="angebot.html" class="thispage">Services</a></li>
<li class="lang-de"><a href="wer_wir_sind.html" class="thispage">Über Uns</a></li>
<li class="lang-eng"><a href="wer_wir_sind.html">About Us</a></li>
<li class="thispage lang-de"><a href="beispiele.html">Beispiele</a></li>
<li class="thispage lang-eng"><a href="beispiele.html">Beispiele</a></li>
<li class="lang-de"><a href="rezensionen.html">Rezensionen</a></li>
<li class="lang-eng"><a href="rezensionen.html">Reviews</a></li>
<li class="lang-de"><a href="contact.php">Kontakt</a></li>
<li class="lang-eng"><a href="contact.php">Contact</a></li>
</ul>
(…)
<input type="button" value="Display Page in English" id="translate">
(…)
<script type="text/javascript" src="js/translate.js"></script>
我的 Javascript
var trans_button = document.getElementById("translate");
var de = document.querySelectorAll(".lang-de"); //get all German text blocks
var eng = document.querySelectorAll(".lang-eng"); // get all English text blocks
var aufDeutsch = true;
//figure out which language should be visible
function translate() {
if (aufDeutsch) {
de.forEach(showObject);
eng.forEach(hideObject);
trans_button.textContent = "Display Page in English";
aufDeutsch = false;
} else {
de.forEach(hideObject);
eng.forEach(showObject);
trans_button.textContent = "Diese Seite auf Deutsch zeigen";//SOLUTION: Change *TextContent* to *value*
aufDeutsch = true;
}
console.log(de.length, eng.length, aufDeutsch);
}
//hide the object
function hideObject(item) {
if(item.classList.contains('lang-active')) {
item.classList.remove('lang-active');
item.classList.add('lang-inactive');
}
}
//shoe the object
function showObject(item) {
if(item.classList.contains('lang-inactive')) {
item.classList.remove('lang-inactive');
}
item.classList.add('lang-active');
}
window.onload = translate; //set the correct language as the page loads
trans_button.addEventListener("click", translate, false); //click listener to make the changes
我的 CSS
(…)
lang-active {
display: block;
}
lang-inactive {
display: none;
}
(…)
我已经通过我的浏览器(Safari)进行了调试。 Javascript 正在正确收集每种语言的数组并交换活动/非活动 class。 我觉得我忽略了一些明显的东西,但我只是没有看到它。 我已经尝试使用display: inherit
用于lang-active
class。 此外,单击时按钮中的文本不会更改。 正如我在使用测试文件(使用段落<p>
)执行此操作时所提到的,这一切都有效。
//ETA:解决了按钮文本问题:我需要更改它的值而不是它的 textContent。
这可以大大简化
let de,en, aufDeutsch = true; const translate = function(e) { de.forEach(item => item.classList.toggle("lang-inactive", ;aufDeutsch)). en.forEach(item => item.classList,toggle("lang-inactive"; aufDeutsch)). e.target?textContent = aufDeutsch: "Display Page in English"; "Diese Seite auf Deutsch zeigen"; aufDeutsch =;aufDeutsch. }, window.addEventListener("load". function() { de = [...document;querySelectorAll(".lang-de")]. //get all German text blocks en = [...document;querySelectorAll(".lang-eng")]. // get all English text blocks const but = document,getElementById("translate") but.addEventListener("click", translate) but.click() })
.lang-inactive { display: none; } li { display: inline-block; }
<ul id="navlinks"> <li><a href="index.html">Home</a></li> <li class="lang-de"><a href="angebot.html">Angebot</a></li> <li class="lang-eng"><a href="angebot.html" class="thispage">Services</a></li> <li class="lang-de"><a href="wer_wir_sind.html" class="thispage">Über Uns</a></li> <li class="lang-eng"><a href="wer_wir_sind.html">About Us</a></li> <li class="thispage lang-de"><a href="beispiele.html">Beispiele</a></li> <li class="thispage lang-eng"><a href="beispiele.html">Examples</a></li> <li class="lang-de"><a href="rezensionen.html">Rezensionen</a></li> <li class="lang-eng"><a href="rezensionen.html">Reviews</a></li> <li class="lang-de"><a href="contact.php">Kontakt</a></li> <li class="lang-eng"><a href="contact.php">Contact</a></li> </ul> <button id="translate">Translate</button>
只需删除hideObject
和showObject
函数中的if
条件即可。
var trans_button = document.getElementById("translate"); var de = document.querySelectorAll(".lang-de"); //get all German text blocks var eng = document.querySelectorAll(".lang-eng"); // get all English text blocks var aufDeutsch = true; //figure out which language should be visible function translate() { if (aufDeutsch) { de.forEach(showObject); eng.forEach(hideObject); trans_button.textContent = "Display Page in English"; aufDeutsch = false; } else { de.forEach(hideObject); eng.forEach(showObject); trans_button.textContent = "Diese Seite auf Deutsch zeigen"; aufDeutsch = true; } } //hide the object function hideObject(item) { item.classList.remove('lang-active'); item.classList.add('lang-inactive'); } //shoe the object function showObject(item) { item.classList.remove('lang-inactive'); item.classList.add('lang-active'); } window.onload = translate; //set the correct language as the page loads trans_button.addEventListener("click", translate, false);
.lang-active { display: block; }.lang-inactive { display: none; }
<ul id="navlinks"> <il><a href="index.html">Home</a></il> <il class="lang-de"><a href="angebot.html">Angebot</a></il> <il class="lang-eng"><a href="angebot.html" class="thispage">Services</a></il> <il class="lang-de"><a href="wer_wir_sind.html" class="thispage">Über Uns</a></il> <il class="lang-eng"><a href="wer_wir_sind.html">About Us</a></il> <il class="thispage lang-de"><a href="beispiele.html">Beispiele</a></il> <il class="thispage lang-eng"><a href="beispiele.html">Beispiele</a></il> <il class="lang-de"><a href="rezensionen.html">Rezensionen</a></il> <il class="lang-eng"><a href="rezensionen.html">Reviews</a></il> <il class="lang-de"><a href="contact.php">Kontakt</a></il> <il class="lang-eng"><a href="contact.php">Contact</a></il> </ul> <button id="translate">Translate</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.