onclick 功能更改 url - 不是每次都有效答案

【问题标题】：onclick function to change url - not working everytimeonclick 功能更改 url - 不是每次都有效
【发布时间】：2016-12-08 16:30:47
【问题描述】：

我有四个链接，每个链接都有一个 onclick 事件，每个链接都将它们的语言代码传递给 changeLanguage 函数。该函数应删除 URL 的最后一个“/”之后的所有内容，并将其替换为新的语言代码，然后重定向到该地址。它大约有 60/70% 的时间工作，但如果没有，页面会重新加载当前页面。我试过window.location.href、window.location.replace、超时。它似乎也是随机的，它可能发生在任何国家的变化中。有什么想法吗？

例如从控制台：

（在法语页面上）

http://localhost:4000/product/fr

（更改为西班牙语 - 有效）

NEW URL http://localhost:4000/product/es

Navigated to http://localhost:4000/product/es

（改成英文 - 没用）

NEW URL http://localhost:4000/product/en

Navigated to http://localhost:4000/product/es

HTML

  <ul class="social-links">
      <li class="lang"><a id='en-lang-nav-button' onclick="return changeLanguage('en', event)" <%if(data.lang.lang == 'en'){%> class="active"<%}%>><%=data.lang.links[0].text%></a> | </li>

      <li class="lang"><a id='fr-lang-nav-button' onclick="return changeLanguage('fr', event)" <%if(data.lang.lang == 'fr'){%> class="active"<%}%>><%=data.lang.links[1].text%></a> | </li>

      <li class="lang"><a id='sp-lang-nav-button' onclick="return changeLanguage('es', event)" <%if(data.lang.lang == 'es'){%> class="active"<%}%>><%=data.lang.links[2].text%></a> | </li>

      <li class="lang"><a id='pt-lang-nav-button' onclick="return changeLanguage('pt', event)" <%if(data.lang.lang == 'pt'){%> class="active"<%}%>><%=data.lang.links[3].text%></a> </li>
  </ul>

  function changeLanguage(lang, event) {
      var index, newURL;
      event.preventDefault();
      event.stopPropagation();
      index = window.location.href.lastIndexOf('/');
      newURL = window.location.href.substring(0, index) + '/' + lang;  

      console.log('NEW URL', newURL);
      window.location = newURL; 
      return false;
   };

BE 的标准路线：

router.get('/about/:lang(en|fr|es|pt)?', function(req, res, next) {
    trackPath(req);
    res.render('about', { data: router.getTemplateData(req.params.lang, 'about') });
});

【问题讨论】：

您尝试更换浏览器了吗？你用的是哪个浏览器？
使用Chrome，但最好兼容所有浏览器

标签： javascript jquery window jquery-events location-href

【解决方案1】：

我不确定问题是由于相同的 ID。 es 和 pt 的元素 <a> 相同。

<li class="lang"><a id='sp-lang-nav-button' onclick="return changeLanguage('es', event)" <%if(data.lang.lang == 'es'){%> class="active"<%}%>><%=data.lang.links[2].text%></a> | </li>

<li class="lang"><a id='sp-lang-nav-button' onclick="return changeLanguage('pt', event)" <%if(data.lang.lang == 'pt'){%> class="active"<%}%>><%=data.lang.links[3].text%></a> </li>

你是在网络服务器上运行它吗？

【讨论】：

谢谢，好地方。我只是改变了它，但它没有任何区别。是的，在本地运行，它是一个节点服务器，没有前端框架，只有 js 和 jquery。
能否展示一下后端的代码，我认为问题可能不是来自前端，而是来自后端
在上面的底部添加了一条标准路由
你好，我试过了，效果很好，后端框架我用的是Express。
您可以删除路由器，只需阅读*.html 和fs 模块，然后重试以帮助您找到问题。

【解决方案2】：

我不想更改 BE 代码，所以我尝试了以下方法，它有效：

      $('li.lang a').on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            var lang = ['/en', '/fr', '/es', '/pt'], 
                location = window.location.href,
                chosenLang = $(this).parent().attr('id');

            // Check url for a lang code
            for(var i = 0; i < lang.length; i++) {
                if (location.indexOf(lang[i]) >= 0) {
                  window.location.href = location.replace(lang[i], '/' + chosenLang);
                  return false;
                } 
            }
            // If no lang code in url
            window.location.href = location.replace('#', '') + '/' + chosenLang;
            return false;
        });

如果有人可以浓缩它，我很乐意看到！

【讨论】：