简体   繁体   English

切换按钮的href链接,取决于JS的网站语言

[英]Switch href link of button, depends on website language by JS

I have a button on a website, I translated the text (using po and mo files), but the link is still only one. 我在网站上有一个按钮,我翻译了文本(使用po和mo文件),但是链接仍然只有一个。 I'm trying to switch that depends on in what language website is open, but my code doesn't work. 我试图根据打开哪种语言的网站来切换,但是我的代码不起作用。 May anybody please help 有人可以帮忙吗

function changeLink(document.getAttribute("lang")){
var theLink = document.querySelector('.donate-now');
    if(document.getAttribute("lang") == 'en-EN'){
        theLink.href="https://usrussiacc.org/membership/";   
    } else if(document.getAttribute("lang") == 'ru-RU'){
        theLink.href="https://usrussiacc.org/ru/glavnaja/chlenstvo/"; 
    }
    }

First, I assume you are setting <html lang="en-EN"> . 首先,假设您正在设置<html lang="en-EN">

<html> is actually the Root Element of document. <html>实际上是文档的根元素 It needs to be retrieved as such; 需要这样检索它; the easiest and quickest way is document.documentElement ( MDS documentation ). 最简单,最快的方法是document.documentElementMDS文档 )。

Using this, we call document.documentElement.getAttribute("lang") to retrieve the lang="aa-AA" attribute off the <html> tag. 使用此方法,我们调用document.documentElement.getAttribute("lang")以从<html>标记中检索lang="aa-AA"属性。

I've also cleaned up the function, and called it separately. 我还清理了该函数,并分别调用它。

 function changeLink(lang) { var theLink = document.querySelector('.donate-now'); if (lang == 'en-EN') { console.log('en-EN') theLink.href = "https://usrussiacc.org/membership/"; } else if (lang == 'ru-RU') { console.log('ru-RU') theLink.href = "https://usrussiacc.org/ru/glavnaja/chlenstvo/"; } else { console.log('neither') } } changeLink(document.documentElement.getAttribute("lang")) 
 <html lang="en-EN"> <head></head> <body> <a href="" class="donate-now">I'm a link</a> </body> </html> 

Although the above code is still not very scalable, or friendly. 尽管上面的代码仍然不是很可扩展或友好的。 Below I've rewritten it, to make it more scalable and reusable. 下面我重写了它,使其更具可伸缩性和可重用性。 Also removed the need for an argument all together. 同时也消除了对参数的需求。 Just add more lang/path pairs to listURI , and it will automatically handle them. 只需将更多lang / path对添加到listURI ,它将自动处理它们。 You could also put in a generic URI, in case the given language doesn't exist (never trust users). 如果给定的语言不存在(从不信任用户),您也可以放入通用URI。

 function changeLink() { let listURI = { 'en-EN': 'https://usrussiacc.org/membership/', 'ru-RU': 'https://usrussiacc.org/ru/glavnaja/chlenstvo/' };// Scale support, by adding new languages and URIs to this list let linkURI = listURI[document.documentElement.getAttribute("lang")]; if (linkURI != undefined) { document.querySelector('.donate-now').href = linkURI; console.log(linkURI) } else { console.log("LANGUAGE DOESN'T EXIST") } } changeLink() 
 <html lang="en-EN"> <head></head> <body> <a href="" class="donate-now">I'm a link</a> </body> </html> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM