Question

有没有办法在一个页面中获取多种语言？所以，如果我有这样的事情：

<div id="content-English"> Hello, user </div>
<div id="content-Dutch"> Hallo, gebruiker </div>

当我在语言选择器中选择英语并隐藏荷兰语时，是否可以只显示英语但是当我选择荷兰语时显示荷兰语并隐藏英语？我知道这可以用JavaScript完成，但我不知道怎么样，任何人都可以帮助我吗？

Answer 1

您可以为每种语言创建一个CSS类，然后根据选择器的值显示/隐藏;像这样的东西：

function Start() {

    $('#LanguageSelect').change(function () {

        $('.Language').hide();
        $('.' + $(this).val()).show();
    });

    $('#LanguageSelect').change();    
}

$(Start);

HTML：

<select id="LanguageSelect">
    <option>English</option>
    <option>French</option>
    <option>German</option>
</select>

<div class="Language English">Hello</div>
<div class="Language French">Bonjour</div>
<div class="Language German">Hallo</div>

这是jsFiddle

我建议大型网站使用服务器端选项，但对于轻型网站，此选项可能实际上更好。

Answer 2

使用Jquery，然后执行：

$("#English-button").click(function(){
    $(".content-English").show(0);
    $(".content-Dutch").hide(0);
    $(".content-German").hide(0);
    $(".content-Spanish").hide(0);
})

每当您点击英语按钮时。相应地更改显示/隐藏

Answer 3

在class属性不唯一时使用var langElems = document.getElementsByClassName('lang-fr'), i; for (var i = 0; i < langElems.length; i ++) { langElems[i].style.display = 'none'; }属性的最佳做法。

使用纯javascript，您可以获得具有某个类的所有元素并隐藏它们：

＆＃13;

<p class="lang-fr">Le plus grand faible des hommes, c'est l'amour qu'ils ont de la vie.</p>

<p class="lang-en">Hello world</p>

<p class="lang-fr">Le plus grand faible des hommes, c'est l'amour qu'ils ont de la vie.</p>

＆＃13;

// get all elements with the class 'lang;
var langElems = document.getElementsByClassName('lang');


function updateLang() {
    // selection value
    var selectedLang = document.getElementById("select-lang").value;

    // loop through the langauge elements
    for (var i = 0; i < langElems.length; i++) {
        // show those that have the selected val as a class
        if (hasClass(langElems[i], selectedLang)) {
            langElems[i].style.display = 'block';
        } else { // hide those that do not
            langElems[i].style.display = 'none';
        }
    }
}

// helper to check if an element contains a class
function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

＆＃13;

并且，这是一种使用选择选项切换显示和隐藏元素的方法：

＆＃13;

<select id="select-lang" onchange="updateLang()">
    <option value="en">English</option>
    <option value="fr">French</option>
</select>
<p class="lang fr">Le plus grand faible des hommes, c'est l'amour qu'ils ont de la vie.</p>
<p class="lang en">Hello world</p>
<p class="lang fr">Le plus grand faible des hommes, c'est l'amour qu'ils ont de la vie.</p>

＆＃13;

{{1}}

＆＃13;

HTH

Answer 4

实现此目的的一种快速方法如下所示，它不太好，应该使用服务器端解决方案。

最好还是使用Css来隐藏元素而不是JavaScript。

小提琴

window.onload = function() {
  var languageSelector = document.getElementById('languageSelector');

  languageSelector.onchange = function() {
    var elements = document.querySelectorAll('div[class^="content-"]');

    for (i = 0; i < elements.length; i++) {
      var element = elements[i];
      element.style.display = element.className.indexOf(this.value) < 0 ? 'none' : 'block';
    }
  };
  languageSelector.onchange();
};

<select id="languageSelector">
  <option value="content-English">English</option>
  <option value="content-Dutch">Dutch</option>
</select>

<div class="content-English">Hello, user</div>
<div class="content-Dutch">Hallo, gebruiker</div>

一页中有多种语言

4 个答案: