如何始终仅针对最后观察到的对象获取“.active”class？

Question

到目前为止，这是我的代码：

// Click Function

$('body').on('click', 'a', function() {
  $('a.active').removeClass('active');
  $(this).addClass('active');
});


// Scroll Function

const mediaInViewport = document.querySelectorAll('.media');

observer = new IntersectionObserver((entries, observer) => {
  console.log('Next Media in Viewport');
  entries.forEach((entry) => {
    if (entry.target && entry.isIntersecting) {
      entry.target.classList.add('active');

      const closestParent = entry.target.closest('section');
      if (closestParent) {
        const selector = closestParent.id;
        const links = document.querySelectorAll('.link');
        for (const link of links) {
          const split = link.href.split('#');
          if (split.length >= 2) {
            const local = split[1];
            link.classList.remove('active');

            if (local === selector) {
              link.classList.add('active');
            }
          }
        }
      }
    }
  });
}, {
  threshold: 0.7
});

window.addEventListener('DOMContentLoaded', () => {
  setTimeout( // Wait for images to fully load
    () => {
      mediaInViewport.forEach((item) => {
        observer.observe(item);
      });
    }, 1000);
});

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 30px;
  text-decoration: none;
  color: inherit;
}

body {
  display: flex;
  cursor: default;
}

#left,
#right {
  width: 50%;
  height: 100vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

#left {
  background-color: rgb(220, 220, 220);
}

#right {
  background-color: rgb(200, 200, 200);
}

.media {
  padding: 10px;
  padding-bottom: 0;
}

.media:nth-last-child(1) {
  margin-bottom: 10px;
}

img {
  display: block;
  width: 100%;
}

.link {
  cursor: pointer;
}

.active {
  background-color: black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="left">
  <a class="link active" href="#landscape">Landscapes</a>
  <a class="link" href="#cats">Cats</a>
  <a class="link" href="#food">Food</a>
</div>

<div id="right">

  <section id="landscape">
    <div class="media">
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">
    </div>
  </section>

  <section id="cats">
    <article class="media">
      <img src="https://upload.wikimedia.org/wikipedia/commons/b/b8/Cute_cat_%281698598876%29.jpg">
    </article>
  </section>

  <section id="food">
    <article class="media food">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg/1200px-Good_Food_Display_-_NCI_Visuals_Online.jpg">
    </article>
  </section>

在某些情况下，不止一个 .link 获得 class .active。如果屏幕是纵向的，就会发生这种情况。我想避免这种情况。只有最后观察到的对象应该触发 link.

的活动状态

也许只写一条规则说：“只能有一个 .active class。”?

但不幸的是，我不知道该怎么做。有人可以帮我吗？我会非常感谢！ <3

Answer 1

    const mediaInViewport = document.querySelectorAll('.media');
    const links = Array.from(document.querySelectorAll('.link'));
    let actLink = links[0];

    document.body.addEventListener('click',  (event)=> {
      if (event.target.tagName === 'a'){
        actLink.classList.remove('active');
        actLink = links.find(link => event.target.href === link.href)
        actLink.classList.add('active');
      }
    }, false)
    
    observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.target && entry.isIntersecting) {
          const closestParent = entry.target.closest('section');
          if (closestParent){
            actLink.classList.remove('active');
            actLink = links.find(link => 
              link.href.slice(link.href.lastIndexOf('#')) === `#${closestParent.id}`
            )
            actLink.classList.add('active');
          }  
        }
      });
    }, {
      threshold: 0.7
    });

    window.addEventListener('DOMContentLoaded', () => {
      setTimeout( // Wait for images to fully load
        () => {
          mediaInViewport.forEach((item) => {
            observer.observe(item);
          });
        }, 1000);
    });

    * {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      font-size: 30px;
      text-decoration: none;
      color: inherit;
    }

    body {
      display: flex;
      cursor: default;
    }

    #left,
    #right {
      width: 50%;
      height: 100vh;
      overflow-y: scroll;
      scroll-behavior: smooth;
    }

    #left {
      background-color: rgb(220, 220, 220);
    }

    #right {
      background-color: rgb(200, 200, 200);
    }

    .media {
      padding: 10px;
      padding-bottom: 0;
    }

    .media:nth-last-child(1) {
      margin-bottom: 10px;
    }

    img {
      display: block;
      width: 100%;
    }

    .link {
      cursor: pointer;
    }

    .active {
      background-color: black;
      color: white;
    }

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div id="left">
    <a class="link active" href="#landscape">Landscapes</a>
    <a class="link" href="#cats">Cats</a>
    <a class="link" href="#food">Food</a>
  </div>
  <div id="right">
    <section id="landscape">
      <div class="media">
        <img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">
      </div>
      <div class="media">
        <img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">
      </div>
    </section>
    <section id="cats">
      <article class="media">
        <img src="https://upload.wikimedia.org/wikipedia/commons/b/b8/Cute_cat_%281698598876%29.jpg">
      </article>
      <article class="media">
        <img src="https://upload.wikimedia.org/wikipedia/commons/b/b8/Cute_cat_%281698598876%29.jpg">
      </article>
    </section>
    <section id="food">
      <article class="media food">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg/1200px-Good_Food_Display_-_NCI_Visuals_Online.jpg">
      </article>
      <article class="media food">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg/1200px-Good_Food_Display_-_NCI_Visuals_Online.jpg">
      </article>
    </section>
  </div>

如何始终仅针对最后观察到的对象获取“.active”class？

How to get ".active" class always only for the last observed object?

javascript

jquery

intersection

intersection-observer