URLを変更するonclick関数 - 毎回動作しません

Question

私は4つのリンクをそれぞれ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> 

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> 

Webサーバーで実行していますか？

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

誰もがそれを凝縮することができた場合は、私が見てみたいです！