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>

Javascript语言切换器

1 个答案: