通过 Javascript 数组简化 if else 语句

问题描述

我为一个多语言网站编写了一些 javascript 代码。代码效果很好，但我觉得我有很多重复的代码。我想知道是否有人可以解释我如何使这个更简单或最小化。我尝试使用 forEach(function (item,index) 但它似乎不起作用。

这是有效的原始代码......

(function () {
  var lang1 = "/en/"; //default language
  var lang2 = "/fr/"; //second language
  var lang3 = "/es/"; //third language

 var languageSwitcher = document.querySelectorAll("a[href='/languages']").forEach((el) => el.parentNode.classList.add("language-switcher"));
 document.querySelector("[data-folder='/languages']").classList.add("language-switcher");
  
  document.querySelectorAll(".language-switcher .header-nav-folder-item").forEach((el) => el.classList.add("languages"));
 document.querySelectorAll(".language-switcher .header-menu-nav-item:not(:first-child)").forEach((el) => el.classList.add("languages"));
  var languages = document.querySelectorAll(".languages");
  
  var language1 = document.querySelectorAll(".language-switcher .languages a[href*='"+lang1+"']");
  var language2 = document.querySelectorAll(".language-switcher .languages a[href*='"+lang2+"']")
  var language3 = document.querySelectorAll(".language-switcher .languages a[href*='"+lang3+"']")

  var windowURL = window.location.href;
  var pageURL = windowURL.split("/")[4];

  if (pageURL == undefined) {
    for (var i = 0; i < language1.length; i++) {
      language1[i].onclick = function () {
        var path = lang1 + "home";
        this.href = path;
      };
    }
    for (var i = 0; i < language2.length; i++) {
      language2[i].onclick = function () {
        var path = lang2 + "home";
        this.href = path;
      };
    }
    for (var i = 0; i < language3.length; i++) {
      language3[i].onclick = function () {
        var path = lang3 + "home";
        this.href = path;
      };
    }
  } else {
    for (var i = 0; i < language1.length; i++) {
      language1[i].onclick = function () {
        var path = lang1 + pageURL;
        this.href = path;
      };
    }
    for (var i = 0; i < language2.length; i++) {
      language2[i].onclick = function () {
        var path = lang2 + pageURL;
        this.href = path;
      };
    }
    for (var i = 0; i < language3.length; i++) {
      language3[i].onclick = function () {
        var path = lang3 + pageURL;
        this.href = path;
      };
    }
  }

 document.querySelectorAll(".header-nav-item:not(.language-switcher) a").forEach((el) => el.classList.add("language"));
  document.querySelectorAll(".header-menu-nav-item:not(.language-switcher) a").forEach((el) => el.classList.add("language"));
  document.querySelectorAll('[data-folder="/languages"] .header-menu-nav-item a').forEach((el) => el.classList.remove("language"));

  var languageLinks = document.querySelectorAll(".language");

  for (var i = 0; i < languageLinks.length; i++) {
    var navURL = languageLinks[i].href;
    if (windowURL.indexOf(lang1) != -1) {
      languages.forEach((el) => el.classList.remove("active"));
      languages[0].classList.add("active");
      if (navURL.indexOf(lang1) != -1) {
        languageLinks[i].closest("div").style.display = "block";
      } else {
        languageLinks[i].closest("div").style.display = "none";
      }
    } else if (windowURL.indexOf(lang2) != -1) {
      languages.forEach((el) => el.classList.remove("active"));
      languages[1].classList.add("active");
      if (navURL.indexOf(lang2) != -1) {
        languageLinks[i].closest("div").style.display = "block";
      } else {
        languageLinks[i].closest("div").style.display = "none";
      }
    } else if (windowURL.indexOf(lang3) != -1) {
      if (navURL.indexOf(lang3) != -1) {
        languages.forEach((el) => el.classList.remove("active"));
        languages[2].classList.add("active");
        languageLinks[i].closest("div").style.display = "block";
      } else {
        languageLinks[i].closest("div").style.display = "none";
      }
    } else {
      if (navURL.indexOf(lang1) != -1) {
        languages.forEach((el) => el.classList.remove("active"));
        languages[0].classList.add("active");
        languageLinks[i].closest("div").style.display = "block";
      } else {
        languageLinks[i].closest("div").style.display = "none";
      }
    }
  }

  var active = document.querySelector(".language-switcher .active");
  active.closest(".language-switcher").prepend(active);
  document.querySelectorAll(".header a").forEach((el) => (el.style.visibility = "visible"));
  languageSwitcher.style.display = "flex";
})();

我尝试使用 forEach 函数和数组，但它不起作用。

(function () {
  var lang = ["/en/","/fr/","/es/"];
  
  document.querySelectorAll("a[href='/languages']").forEach((el) => el.parentNode.classList.add("language-switcher"));
  document.querySelector("[data-folder='/languages']").classList.add("language-switcher");
  
  document.querySelectorAll(".language-switcher .header-nav-folder-item").forEach((el) => el.classList.add("languages"));
  document.querySelectorAll(".language-switcher .header-menu-nav-item:not(:first-child)").forEach((el) => el.classList.add("languages"));

  var languages = document.querySelectorAll(".languages");

  var windowURL = window.location.href;
  var pageURL = windowURL.split("/")[4];

  lang.forEach(function (index,value) {
    var language = document.querySelectorAll(".language-switcher .languages a[href*='" + value + "']");
    if (pageURL == undefined) {
      for (var i = 0; i < language.length; i++) {
        language[i].onclick = function () {
          var path = value + "home";
          this.href = path;
        };
      }
    } else {
      for (var i = 0; i < language.length; i++) {
        language[i].onclick = function () {
          var path = value + pageURL;
          this.href = path;
        };
      }
    }
    

    document.querySelectorAll(".header-nav-item:not(.language-switcher) a").forEach((el) => el.classList.add("language"));
    document.querySelectorAll(".header-menu-nav-item:not(.language-switcher) a").forEach((el) => el.classList.add("language"));
    document.querySelectorAll('[data-folder="/languages"] .header-menu-nav-item a').forEach((el) => el.classList.remove("language"));

    var languageLinks = document.querySelectorAll(".language");

    for (var j = 0; j < languageLinks.length; j++) {
    var navURL = languageLinks[j].href;
    if (windowURL.indexOf(value) != -1) {
      languages.forEach((el) => el.classList.remove("active"));
      languages[index].classList.add("active");
      if (navURL.indexOf(value) != -1) {
        languageLinks[j].closest("div").style.display = "block";
      } else {
        languageLinks[j].closest("div").style.display = "none";
      }
    } else {
      if (navURL.indexOf('/en/') != -1) {
        languages.forEach((el) => el.classList.remove("active"));
        languages[0].classList.add("active");
        languageLinks[j].closest("div").style.display = "block";
      } else {
        languageLinks[j].closest("div").style.display = "none";
      }
    }
  }
  
  document.querySelector(".header").style.visibility = "visible";
  var active = document.querySelector(".language-switcher .active");
  active.closest(".language-switcher").prepend(active);
});

})();

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）