Question

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

e.g。来自控制台：

（法语页面）

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>

JS

      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') });
    });

Answer 1

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

<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>

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

Answer 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;
        });

如果有人可以凝聚它，我很乐意看到它！

onclick函数来更改URL - 每次都不工作

2 个答案: