单击时在一项功能中更新 URL答案

【问题标题】：Update URL in one function on click单击时在一项功能中更新 URL
【发布时间】：2021-02-13 03:35:13
【问题描述】：

我有一个使用 Pug 模板引擎的 Node.js 网站，可以选择更改网站显示的语言。

迄今为止，这一切都已被硬编码，我的导航栏中的语言切换器显示为：

li.nav-item.active
    a(href="#" id="to_en") EN &nbsp
    a(href="#" id='to_kyr') | KG &nbsp
    a(href="#" id='to_ru') | RU &nbsp

当点击这些值时，会运行以下 jQuery 函数来将 URL 更改为新语言：

$(document).ready(function () {
    var current = location.pathname;
    var ru_url = current.replace('/en', '/ru');
    $("#to_ru").prop('href', ru_url);
});

$(document).ready(function () {
    var current = location.pathname;
    var kg_url = current.replace('/en', '/kg');
    $("#to_kyr").prop('href', kg_url);
});

我现在正试图用一个通用函数替换它，该函数选择当前语言和选择的语言，然后执行相同的操作。查看this question，我尝试添加类说明符，如下所示，但我不确定这是否可行，因为我不想每次都指定我选择的语言。

li.nav-item.active
    a(class="change_lang" href="#" id="to_en") EN &nbsp
    a(class="change_lang" href="#" id='to_kyr') | KG &nbsp
    a(class="change_lang" href="#" id='to_ru') | RU &nbsp

我还将当前语言存储为一个 jQuery 变量，我可以使用它来查找要替换的 URL 部分，如下所示（例如，#{lang} 可以是“/en”）。有没有办法动态更改 URL 以获取点击的值？

current.replace('#{lang}', 'lang_to_change_to')

【问题讨论】：

标签： javascript html jquery node.js

【解决方案1】：

您可以利用each 和data 函数来按照这些思路创建一些东西...

function getCurrentUrl() {
  //TODO: for demo purposes I've replaced this line: "return location.pathname;"
  return "http://example.com/en/index.htm";
}

function getActiveLanguage() {
  //TODO: You should search the URL for the language text, e.g. "/en" or "/kr" to determine the current language.
  return "en";
}

$(document).ready(function() {
  const currentUrl = getCurrentUrl();
  const activeLanguage = getActiveLanguage();

  // Loop over each element with class "change_lang"
  $(".change_lang").each(function(index, element) {
    // Get the "data-language" attribute value for each of these elements.
    const language = $(element).data("language");

    // Your original code to change the links
    var url = currentUrl.replace('/' + activeLanguage, '/' + language);
    $(element).prop('href', url);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="change_lang" data-language="en" href="#" id="to_en">EN</a>
<a class="change_lang" data-language="kg" href="#" id='to_kyr'>KG</a>
<a class="change_lang" data-language="ru" href="#" id='to_ru'>RU</a>

【讨论】：