如何减少jQuery函数中添加url到语言切换菜单的重复

Question

我正在设置一个没有服务器端访问的多语言下拉切换。这是一个集成了Twig的WordPress站点，所以通常的WP处理诸如获取主页和路径url之类的细节是不可用的。有了这些限制，jQuery似乎是最可行的解决方案。

这是我到目前为止所做的——这更新了下拉菜单中的href属性，用于在四个站点之间切换:英语(默认，博客ID:1)，德语，法语和西班牙语。下面的脚本运行良好，但我希望尽可能减少重复。将.indexOf项放在数组中会复制URL中的2个字母的国家字符串，这就是代码处于这种超级重复状态的原因。

理想我想要一个if语句,检查/de/fr,/es因为这三块是几乎相同的。提前感谢您的指点。

var langDropPathname = window.location.pathname.slice(3); // cut 2-letter country and slash from path for non-default sites
var langDropPathEN = window.location.pathname; // path for default site
var langDropDE = "/de";
var langDropFR = "/fr";
var langDropES = "/es";
if (window.location.href.indexOf("/de/") > -1) {
$(".langDropEN").attr('href', langDropPathname);
$(".langDropDE").attr('href', langDropDE+langDropPathname);
$(".langDropFR").attr('href', langDropFR+langDropPathname);
$(".langDropES").attr('href', langDropES+langDropPathname);
if ($("body").hasClass("error404")) {
document.location.href=langDropDE;
}
} else if (window.location.href.indexOf("/fr/") > -1) {
$(".langDropEN").attr('href', langDropPathname);
$(".langDropDE").attr('href', langDropDE+langDropPathname);
$(".langDropFR").attr('href', langDropFR+langDropPathname);
$(".langDropES").attr('href', langDropES+langDropPathname);
if ($("body").hasClass("error404")) {
document.location.href=langDropFR;
}
} else if (window.location.href.indexOf("/es/") > -1) {
$(".langDropEN").attr('href', langDropPathname);
$(".langDropDE").attr('href', langDropDE+langDropPathname);
$(".langDropFR").attr('href', langDropFR+langDropPathname);
$(".langDropES").attr('href', langDropES+langDropPathname);
if ($("body").hasClass("error404")) {
document.location.href=langDropES;
}
} else {
$(".langDropEN").attr('href', langDropPathEN);
$(".langDropDE").attr('href', langDropDE+langDropPathEN);
$(".langDropFR").attr('href', langDropFR+langDropPathEN);
$(".langDropES").attr('href', langDropES+langDropPathEN);
}

Answer 1

简单地遍历['/de', '/fr', '/es']数组看起来就可以了。

const langs = ['/de', '/fr', '/es'];
const lang = langs.find(substr => window.location.href.includes(substr));
const suffix = lang ? langDropPathname : langDropPathEN;
$(".langDropEN").attr('href', suffix);
$(".langDropDE").attr('href', langDropDE + suffix);
$(".langDropFR").attr('href', langDropFR + suffix);
$(".langDropES").attr('href', langDropES + suffix);
if ($("body").hasClass("error404") && lang) {
document.location.href = lang.slice(1);
}

我不知道代码的更广泛的上下文，但如果你能把所有的语言放在一起，而不是挑出几个特定的语言，那就更好了。比如

const langs = {
de: <content of langDropDE>
fr: <content of langDropFR>
...
}

对于所有语言，然后

const langEntry = Object.entries(langs)
.find(entry => window.location.href.includes('/' + entry[0]));

并从那里继续，现在您在找到的条目中有了匹配的语言字符串和关联的langDrop。

Answer 2

您可以使用正则表达式

进行匹配

const
langDropPathEN   = window.location.pathname // path for default site
, langDropPathname = langDropPathEN.slice(3) // cut 2-letter country and slash from path for non-default sites
, LangDrop         = { DE: '/de', FR: '/fr', ES: '/es' }
, LangRegEx        = new RegExp('/de/|/fr/|/es/')  
;
let lang = window.location.href.match(LangRegEx)
if (!!lang)
{
$(".langDropEN").attr('href', langDropPathname);
$(".langDropDE").attr('href', langDrop.DE +langDropPathname);
$(".langDropFR").attr('href', langDrop.FR +langDropPathname);
$(".langDropES").attr('href', langDrop.ES +langDropPathname);
if ($("body").hasClass("error404")) 
document.location.href = lang[0].slice(0,3);
}
else
{
$(".langDropEN").attr('href', langDropPathEN);
$(".langDropDE").attr('href', langDrop.DE +langDropPathEN);
$(".langDropFR").attr('href', langDrop.FR +langDropPathEN);
$(".langDropES").attr('href', langDrop.ES +langDropPathEN);
}