Question

我有以下完美的代码。

这是来自我的一个WordPress博客插件的代码，它只是创建一个下拉列表，然后让用户根据他们选择的语言浏览网站。

唯一认为缺少的是当选择其他语言并且用户转到该页面时，在下拉菜单中将语言重置为打开“已选择”属性的语言，即“英语”。

我需要下拉列表来显示所选项目/语言以使其进入该页面。因此，例如，如果我选择“Deutsch”，那么当它到达该页面时，它应该在下拉菜单中显示“Deutsch”。

任何想法如何调整此代码来实现... ??

<ul class="qtrans_language_chooser" id="mqtranslate-2-chooser"><li class="lang-de"><a href="http://localhost/tshirts/?lang=de" hreflang="de" title="Deutsch"><span>Deutsch</span></a></li><li class="lang-en active"><a href="http://localhost/tshirts/" hreflang="en" title="English"><span>English</span></a></li><li class="lang-fr"><a href="http://localhost/tshirts/?lang=fr" hreflang="fr" title="Français"><span>Français</span></a></li><li class="lang-es"><a href="http://localhost/tshirts/?lang=es" hreflang="es" title="Español"><span>Español</span></a></li></ul><div class="qtrans_widget_end"></div><script type="text/javascript">
// <![CDATA[
var lc = document.getElementById('mqtranslate-2-chooser');
var s = document.createElement('select');
s.id = 'qtrans_select_mqtranslate-2-chooser';
lc.parentNode.insertBefore(s,lc);
        var sb = document.getElementById('qtrans_select_mqtranslate-2-chooser');
        var o = document.createElement('option');
        var l = document.createTextNode('Deutsch');

        o.value = 'http://localhost/tshirts/?lang=de';
        o.appendChild(l);
        sb.appendChild(o);

        var sb = document.getElementById('qtrans_select_mqtranslate-2-chooser');
        var o = document.createElement('option');
        var l = document.createTextNode('English');
        o.selected = 'selected';
        o.value = 'http://localhost/tshirts/';
        o.appendChild(l);
        sb.appendChild(o);

        var sb = document.getElementById('qtrans_select_mqtranslate-2-chooser');
        var o = document.createElement('option');
        var l = document.createTextNode('Français');

        o.value = 'http://localhost/tshirts/?lang=fr';
        o.appendChild(l);
        sb.appendChild(o);

        var sb = document.getElementById('qtrans_select_mqtranslate-2-chooser');
        var o = document.createElement('option');
        var l = document.createTextNode('Español');

        o.value = 'http://localhost/tshirts/?lang=es';
        o.appendChild(l);
        sb.appendChild(o);
        s.onchange = function() { document.location.href = this.value;}
lc.style.display='none';
// ]]>
</script>

编辑：乔的评论如下。现在总是突出显示“英语”，无论它出现在哪个语言页面上。

        var sb = document.getElementById('qtrans_select_mqtranslate-2-chooser');
        var o = document.createElement('option');
        var l = document.createTextNode('Deutsch');
o.selected = document.location.href.match(/\/de\//) !== null        
        o.value = 'http://localhost/tshirts/?lang=de';
        o.appendChild(l);
        sb.appendChild(o);

        var sb = document.getElementById('qtrans_select_mqtranslate-2-chooser');
        var o = document.createElement('option');
        var l = document.createTextNode('English');
o.selected = document.location.href.match(/\/(de|fr|es)\//) === null
        o.value = 'http://localhost/tshirts/';
        o.appendChild(l);
        sb.appendChild(o);

Answer 1

使用cookie记住用户的语言。因此，在您的网站在浏览器中加载之前发生任何事情之前，服务器都知道用户选择了哪种语言。只有Javascript无法帮助您实现这一目标。有很多方法可以实现cookie，但是如果你不熟悉cookie并且不了解它们是如何工作的（从后端角度来看，前端不算数） - 那么你需要在做任何其他事情之前阅读这篇文章（http://www.w3schools.com/php/php_cookies.asp）！

就个人而言，我只是在我的wordpress主题的header.php中添加一些cookie逻辑。如果你正在使用别人的主题，你可能会想要使用一些wordpress钩子。

在您阅读了关于cookie的基本w3schools文章以及它们如何与PHP一起工作之后，您可以决定是否要使用PHP或使用Wordpress API实现cookie（在幕后，使用的是w3schools文章，但有额外的逻辑） - http://codex.wordpress.org/WordPress_Cookies

另外，既然你现在知道你需要使用cookie，你可以搜索“wordpress cookie language”等帖子 - 这里有一个jQuery插件（https://github.com/carhartl/jquery-cookie/）引用： Remember preferable language - 我个人不会为此使用jquery。

Answer 2

如果所有特定于语言的页面都在网址中包含语言代码，则可以使用正则表达式来确定o.selected：

o.selected = document.location.href.match(/\/de\//) !== null

和英语

o.selected = document.location.href.match(/\/(de|fr|es)\//) === null

<强>更新

在第二个示例中，您将语言位从/tshirts/de/更改为/?lang=de'。如果要将语言混合并匹配到URL或查询字符串中，则需要对两者进行测试。

o.selected = document.location.href.match(/(\/de\/?)|([?&]lang=de)/) !== null

正则表达式\/de\/?的第一部分将匹配网址末尾的/de/或/de，第二部分将匹配?lang=de或{{1} } {和&lang=de本质上是一个OR运算符。只需将|替换为de或fr即可将其用于其他语言。

对于英语，请检查所有其他语言并选择是否找不到：

es

o.selected = document.location.href.match(/(\/(de|es|fr)\/?)|([?&]lang=(de|es|fr))/) === null部分将匹配(de|es|fr)，de或es

中的任何一个

Answer 3

您想要记住用户从一个页面到另一个页面的语言选择。使用以下内容。使用以下之一：

使用cookies，在Cookie中设置语言首选项，然后再检索它。
使用本地Storage或sessionStorage存储语言首选项，然后检索它并更改默认值。
为所选语言设置session变量，在另一页上，检查语言的会话变量值。

下拉列表以保留所选项目

3 个答案: