Добавляется класс только к первому диву, в чем может быть проблема?

Question

[Maix200082]

js

(function () {
    var square = document.querySelector('.skill__skills');
  
    var observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        var entrySquare = entry.target.querySelector('.loading');
        if (typeof getCurrentAnimationPreference === 'function' && !getCurrentAnimationPreference()) {
          return;
        }
  
        if (entry.isIntersecting) {
          entrySquare.classList.add('square-animation');
          return;
        }
  
        entrySquare.classList.remove('square-animation');
      });
    });
  
    observer.observe(square);
  })();

<div class="skill__skills">
      <div class="skill__item">HTML5</div>
      <div class="loading"></div>
      <div class="skill__item">CSS</div>
      <div class="loading"></div>
      <div class="skill__item">Vue</div>
      <div class="loading"></div>
      <div class="skill__item">Figma</div>
      <div class="loading"></div>
</div>

Answer 1

[Сергей delphinpro]

(function () {
    const square = document.querySelector('.skill__skills');
  
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {

        const entrySquares = entry.target.querySelectorAll('.loading');

        if (typeof getCurrentAnimationPreference === 'function' && !getCurrentAnimationPreference()) {
          return;
        }
        
        entrySquares.forEach(entrySquare => {
            if (entry.isIntersecting) {
                entrySquare.classList.add('square-animation');
                return;
            }
            entrySquare.classList.remove('square-animation');
        })
  
      });
    });
  
    observer.observe(square);
})();

Comments

[Maix200082]

Благодарю, все работает!