Question

我试图在我的所有网页上应用RTL。我有这个代码并且它正在工作但是当我去另一个页面或刷新时，它会变回LTR。有谁知道如何在所有页面上应用它？因为我只看到了如何在一页上应用它的答案。

RTL JS：

$(document).ready(function(){
  /** LANGUAGE BUTTONS **/
  $( ".lang-en" ).click(function() {
    if($(document.body).hasClass('rtl')){ $(document.body).removeClass('rtl');} 
  });

  $( ".lang-ar" ).click(function() {
    if(!$(document.body).hasClass('rtl')){ $(document.body).addClass('rtl');} 
  });
});

HTML：

<ul class="list-inline m-0 p-0">
              <li class="list-inline-item"><button class="lang-en btn-plain p-1 active">English</button></li>
              <li class="list-inline-item"><button class="lang-ar btn-plain p-1">العربية</button></li>
            </ul>

Answer 1

JavaScript是无状态的，因此在这种情况下，您需要从localStorage或cookie获取帮助，请尝试以下方式：

$(document).ready(function(){
  /** LANGUAGE BUTTONS **/
  $('body').addClass(localStorage.getItem("lang"));
  $(".lang-en").click(function() {
    localStorage.setItem('lang', 'ltr');
    $('body').removeClass('rtl').addClass(localStorage.getItem("lang"));
  });

  $(".lang-ar").click(function() {
    localStorage.setItem('lang', 'rtl');
    $('body').removeClass('ltr').addClass(localStorage.getItem("lang"));
  });
});

在所有页面上应用RTL

1 个答案: