Выпадающее меню при обновлении изменений JavaScript - PullRequest
Новая
       2

Выпадающее меню при обновлении изменений JavaScript

0 голосов
/ 23 июня 2019

Я реализовал загрузчик navbar uisng 4, в котором у меня есть раскрывающийся язык, по выбору переводит страницу, Когда выбран язык выпадающего меню, URL-адрес изменится, и выпадающий список не будет отображать правильный выбор,

я должен сделать ajax-вызов, чтобы не обновлять / перезагружать страницу и не изменять содержимое. Пожалуйста, помогите 

<body>
  <nav>
    <div class="dropdown">
      <button id="language" class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu2"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="clickButton()">
        English
      </button>
      <div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="clickItem();">
        <a class="dropdown-item" href="/en">English</a>
        <a class="dropdown-item" href="/fr">French</a>
      </div>
    </div>
  </nav>
</body>

<script>
 function handleLanguage() {
    document.getElementById("languagelist").click();
  }

  function handleLanguageItem() {
    var element = document.getElementById("languagelist");
    for (var i = 0; i < element.children.length; i++) {
      (function(index) {
        element.children[i].onclick = function() {
          var thetext = element.getElementsByTagName('a')[index].innerHTML;
          var buttonelement = document.getElementById("language")
          buttonelement.innerText = thetext;
        }
      })(i);
    }    
  }

</script>

Ответы [ 2 ]

0 голосов
/ 24 июня 2019

Я не очень знаком с .ejs, но (глядя на другой код, который вы разместили в своем комментарии), похоже, что вы сможете "передать" выбранный язык из req.params.lang и затем сделать его доступнымв ваших .ejs-шаблонах.

Что-то вроде: 

router.get('/:lang', function (req, res) {
    const languageMap = {
      "en": "English",
      "fr": "French"
    };

    const selectedLang = req.params.lang;
    const name = languageMap[selectedLang];
    // pass the value down to index.ejs which in turn renders header.ejs 
    res.render('index.ejs', { selectedLanguageName: name });
});

А потом в вашем header.ejs.Вы должны иметь в своем распоряжении selectedLanguageName, используя синтаксис <%= yourVariableNameHere %> 

<button id="language" class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu2"
    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="clickButton()">
    <%=  selectedLanguageName %>
  </button>
  <div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="clickItem(); return false">
    <a class="dropdown-item" href="/en">English</a>
    <a class="dropdown-item" href="/fr">French</a>
  </div>

В этом руководстве я нашел некоторую полезную информацию: https://scotch.io/tutorials/use-ejs-to-template-your-node-application

Возможно, потому что index.ejsВключает в качестве «частичного», вы должны явно передать переменную к нему, когда вы включаете его. 

<%- include('header.ejs', {selectedLanguageName: selectedLanguageName}); %>

или что-то вроде этого.

У Ejs довольно хорошая документация по основам, вероятно, стоит проверить https://ejs.co/#docs

0 голосов
/ 23 июня 2019

Вы изменяете страницу, поэтому используемый вами javascript не будет ничего делать после нажатия, вам следует изменить текст кнопки через сервер при загрузке страницы в зависимости от пути.Но вот решение с использованием javascript (не оптимальное, поскольку сначала требуется загрузка страницы): 

let languageMap = {
    "en": "English",
    "fr": "French"
};

document.querySelector('#language').innerText = languageMap[location.pathname.substr(1, 2)]; // Get the language short from the 2 first characters after the / in the URL
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...