时间戳

首页 > 解决方案 > 如何减少 jQuery 函数中用于将 URL 附加到语言切换菜单的重复

javascript - 如何减少 jQuery 函数中用于将 URL 附加到语言切换菜单的重复

问题描述

我正在设置一个没有服务器端访问的多语言下拉切换。它适用于集成了 Twig 的 WordPress 站点，因此处理获取主页和路径 URL 等事情的常用 WP 细节不可用。有了这些限制，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);
  }

标签： javascriptjquery

解决方案

简单地迭代一系列['/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与找到的条目相关联。

推荐阅读