navLinks.forEach не является функцией - PullRequest
Новая
       4

navLinks.forEach не является функцией

0 голосов
/ 14 февраля 2020

Я делаю отзывчивую панель навигации, и я не знаю, в чем проблема в функции. это должно работать, потому что navLinks определен. Так может кто-нибудь сказать мне, в чем здесь проблема? 

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelector('.nav-links li');
  //Toggle Nav 
  burger.addEventListener('click', () => {
    nav.classList.toggle('nav-active');
  });
  //Animate Links
  navLinks.forEach((link, index) => {
    link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7}s`;
  });
}

navSlide();

Ответы [ 2 ]

0 голосов
/ 14 февраля 2020

Метод querySelector () возвращает первый элемент в документе, который соответствует указанному селектору, или группу селекторов, тогда как метод querySelectorAll () возвращает stati c (не активен) NodeList, представляющий список элементов документа , которые соответствуют указанной группе селекторов.

Поскольку вы хотите получить все элементы li и не только первый элемент li, найденный внутри элемента .nav-links, просто замените querySelector() на querySelectorAll() в переменной navLinks следующим образом: 

const navLinks = document.querySelectorAll('.nav-links li');
0 голосов
/ 14 февраля 2020

хорошо, я думаю, вам нужно l oop для каждого li, тогда вы можете сделать это, используя $ (селектор) .each . В $ (this) получить контроль и index получить индекс контроля 

$(document).ready(function(){//Code for Each li
$('ul>li').each(function(index){console.log(this);console.log(index);});
});
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.each demo</title>
  <style>

  </style>
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
 
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
 
</body>
</html>
<script href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/core.js"></script>
...