Если оператор не работает с classList добавить - PullRequest
Новая
       1

Если оператор не работает с classList добавить

0 голосов
/ 04 февраля 2019

я создаю панель навигации и хочу, чтобы класс `active был добавлен, когда я нахожусь на этой конкретной странице
код, приведенный ниже, не разрушается оператором if (показанным с комментарием) 

<html>
<head>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
  <a  href="a.html" class="nav-item">nav</a>
  <a  href="b.html" class="nav-item">nav</a>
  <p id="z">aaa</p>
  <p id="zz"></p>

  <script>
  var navClass = document.getElementsByClassName("nav-item");
  var path = window.location.href;

  for (i = 0; i < navClass.length; i++) {
//my issue
    if (navClass[i] === path) {
      navClass[i].classList.add("active");
    }
  }
  //for testing
  var xx = navClass[0];//.getAttribute("herf");
  document.getElementById("zz").innerHTML = xx + "<br>" + path;

  </script>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 04 февраля 2019

Переменные, с которыми вы работаете, отформатированы немного иначе, чем ваш код подразумевает, что вы ожидаете их.

Если вы откроете консоль и получите доступ к переменной window.location.href, вы увидите еесодержит полный действительный URL-адрес, а не относительный формат, по которому следуют ссылки в вашей навигации, поэтому ваш абсолютный тест (===) будет каждый раз терпеть неудачу, поскольку они никогда не будут равны. 

/11438625/esli-operator-ne-rabotaet-s-classlist-dobavit

не равно

if-statement-not-working-with-classlist-add

Вы можете решить эту проблему, сделав навигационные ссылки абсолютными, но это вызовет у вас больше проблем в будущем.

Если вы измените свой тест, сравнивая оба теста с поискомдля href навигации внутри переменной path ваш код будет работать.Кроме того, вам необходимо проверить атрибут href вашего объекта, а не сам объект.

Изменить: 

if (navClass[i] === path) {

Кому: 

if (path.includes(navClass[i].href)) {

Отредактировано: Забыл добавить атрибут .href к предлагаемому изменению

0 голосов
/ 04 февраля 2019

Вам нужно изменить способ обнаружения и способ добавления.Также сделайте navClass массив, а не NodeList: 

var navClass = Array.prototype.slice.call(document.getElementsByClassName("nav-item"));
var path = window.location.href;

navClass.forEach(elem => {
    if (path.includes(elem.href)) {
        elem.classList.add("active");
    }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...