Javascript語言切換器

Question

關於我的代碼，我還有另一個問題，我目前找到了一個可翻譯不同<p>塊的腳本。 現在，我有以下問題，我想將標簽從法語“ fr”更改為德語“ de”。 我以為這很容易，因此我將所有內容從“ fr”更改為“ de”，不幸的是該腳本不再起作用。 誰能幫我 ？

let langs = ['en', 'fr'];
let lang = 'en';
setLangStyles(lang);

function setStyles(styles) {
    var elementId = '__lang_styles';
    var element = document.getElementById(elementId);
    if (element) {
        element.remove();
    }

    let style = document.createElement('style');
    style.id = elementId;
    style.type = 'text/css';

    if (style.styleSheet) {
        style.styleSheet.cssText = styles;
    } else {
        style.appendChild(document.createTextNode(styles));
    }
    document.getElementsByTagName('head')[0].appendChild(style);
}

function setLang(lang) {
    setLangStyles(lang);
}

function setLangStyles(lang) {
    let styles = langs
    .filter(function (l) {
        return l != lang;
    })
    .map(function (l) {
        return ':lang('+ l +') { display: none; }';
    })
    .join(' ');

    setStyles(styles);
}

我的index.php

<a href="" hreflang="en" onclick="setLang('en'); return false">English</a>
<a href="" hreflang="fr" onclick="setLang('fr'); return false">Deutsch</a>
<p lang='en'>Hi everyone!</p>
<p lang='fr'>Guten Tag!</p>

當我將所有“ fr”標簽更改為英文，從而使“ de”腳本不再起作用時，會出現問題？

Answer 1

這讓我感到擔心，我剛剛將#添加到href="#" ，並將所有fr替換為de

 let langs = ['en', 'de']; //Changed let lang = 'en'; setLangStyles(lang); function setStyles(styles) { var elementId = '__lang_styles'; var element = document.getElementById(elementId); if (element) { element.remove(); } let style = document.createElement('style'); style.id = elementId; style.type = 'text/css'; if (style.styleSheet) { style.styleSheet.cssText = styles; } else { style.appendChild(document.createTextNode(styles)); } document.getElementsByTagName('head')[0].appendChild(style); } function setLang(lang) { debugger setLangStyles(lang); } function setLangStyles(lang) { let styles = langs .filter(function(l) { return l != lang; }) .map(function(l) { return ':lang(' + l + ') { display: none; }'; }) .join(' '); setStyles(styles); } 

 <a href="#" hreflang="en" onclick="setLang('en'); return false">English</a> <a href="#" hreflang="de" onclick="setLang('de'); return false">Deutsch</a> <!-- Changed --> <p lang='en'>Hi everyone!</p> <p lang='de'>Guten Tag!</p> <!-- Changed --> 

帶有3種語言的示例。

 let langs = ['en', 'fr', 'de']; //Changed let lang = 'en'; setLangStyles(lang); function setStyles(styles) { var elementId = '__lang_styles'; var element = document.getElementById(elementId); if (element) { element.remove(); } let style = document.createElement('style'); style.id = elementId; style.type = 'text/css'; if (style.styleSheet) { style.styleSheet.cssText = styles; } else { style.appendChild(document.createTextNode(styles)); } document.getElementsByTagName('head')[0].appendChild(style); } function setLang(lang) { debugger setLangStyles(lang); } function setLangStyles(lang) { let styles = langs .filter(function(l) { return l != lang; }) .map(function(l) { return ':lang(' + l + ') { display: none; }'; }) .join(' '); setStyles(styles); } 

 <a href="#" hreflang="en" onclick="setLang('en'); return false">English</a> <a href="#" hreflang="fr" onclick="setLang('fr'); return false">French</a> <a href="#" hreflang="de" onclick="setLang('de'); return false">Deutsch</a> <p lang='en'>Hi everyone!</p> <p lang='fr'>Salut à tous!</p> <p lang='de'>Guten Tag!</p>