javascript - 基于 .pathname 运行函数

问题描述

所以我在我的页面中有这段代码：一个非常简单但有效的脚本，可以将它翻译成多种语言。

// preparing language file
var aLangKeys=new Array();
aLangKeys['en']=new Array();
aLangKeys['es']=new Array();
aLangKeys['fr']=new Array();
aLangKeys['cn']=new Array();

aLangKeys['en']['language']='english';
aLangKeys['es']['language']='espa&ntilde;ol';
aLangKeys['fr']['language']='français';
aLangKeys['cn']['language']='中文';

aLangKeys['en']['buy']='buy';
aLangKeys['es']['buy']='comprar';
aLangKeys['fr']['buy']='acheter';
aLangKeys['cn']['buy']='买';

$(document).ready(function() {

    // onclick behavior
    $('.language').click(function() {
        var lang = $(this).attr('id'); // obtain language id

        if ($(this).attr('id') == 'es') {
          $('.language').attr('id', 'fr');
        }

        else if ($(this).attr('id') == 'fr') {
          $('.language').attr('id', 'cn');
        }

        else if ($(this).attr('id') == 'cn') {
          $('.language').attr('id', 'en');
        }

        else if ($(this).attr('id') == 'en') {
          $('.language').attr('id', 'es');
        }

        // translate all translatable elements
        $('.translate').each(function(i){
          $(this).html(aLangKeys[lang][ $(this).attr('key') ]);
        });

    } );

});



// HERE'S WHERE MY BRAIN STARTS MALFUNCTIONING

if ((window.location.pathname).split('/')[1] == 'es') {
    // <-- EXECUTE FUNCTION ABOVE TO TRANSLATE TO SPANISH BASED ON PATHNAME
}

else if ((window.location.pathname).split('/')[1] == 'fr') {
    // <-- EXECUTE FUNCTION ABOVE TO TRANSLATE TO FRENCH BASED ON PATHNAME
}

else {
}

因此，它在单击按钮时基本上会转换（更改页面上某些元素的值）。每次单击它，都会更改为下一种语言。这很好用。

问题是，如果用户从某个链接访问，我希望它“自动”更改为某种语言：

例子：

www.mysite.com（没有任何反应，因为路径名上没有任何内容）
www.mysite.com/es/（'自动将值更改为西班牙语'）
www.mysite.com/fr/（'自动将值更改为法语'）

我尝试用javascript“伪造”按钮点击，但没有奏效。还尝试“命名”翻译功能并“调用/运行”它。

我知道这样做更容易，而且我让它变得复杂，但我是个菜鸟。

请帮忙。或者只是一个提示。在此先感谢并为我的英语感到抱歉。

标签： javascriptfunctionpathname

基于上面的几个想法的代码：

1) 让我们更改aLangKeys为一个对象，每个键都是另一个对象。IE

var aLangKeys={};
aLangKeys['en']={}; // Thats a named key/prop so we want an object here
...
aLangKeys['en']['language']='english'; // ditto the above comment

2）我们可能想要移动在 ready 函数中检查位置的逻辑。IE

$(document).ready(function() {
    // onclick behavior
    $('.language').click(function() {
       ...
    });

    // we want access to the DOM *and* maybe certain functions that do stuff. So its gotta be in here...
    if ((window.location.pathname).split('/')[1] == 'es') {
        // <-- EXECUTE FUNCTION ABOVE TO TRANSLATE TO SPANISH BASED ON PATHNAME
    }
    else if ((window.location.pathname).split('/')[1] == 'fr') {
        // <-- EXECUTE FUNCTION ABOVE TO TRANSLATE TO FRENCH BASED ON PATHNAME
    }
}); // end of ready function

几个原因：

a) 我们希望根据路径名/位置等信息更改页面内容。所以我们想知道页面是先加载的。

b）也许我们会想要创建一个函数来进行语言处理/更改并从多个地方调用它。我们希望该功能在我们的位置检查逻辑范围内。如果我们在准备好的函数范围内定义它，我们将需要在同一范围内调用该函数的任何逻辑

javascript - 基于 .pathname 运行函数

问题描述

解决方案

推荐阅读