多个元素的相同 IntersectionObserver - 如何使用 classList.add() 正确定位相交元素答案

【问题标题】：Same IntersectionObserver for mutiple elements - how to properly target intersected element with classList.add()多个元素的相同 IntersectionObserver - 如何使用 classList.add() 正确定位相交元素
【发布时间】：2022-09-12 04:55:59
【问题描述】：

我正在使用 Ziyad 和 Ruslan Korkin 编写的出色代码 provided here，但是当我想在 entry.target 上使用 Classlist 时，我卡住了...... classList.add 或 classList.remove 无法按预期工作。

在此代码中元素相交的部分中，如何正确定位一个相交元素并在其上的 classList 中添加/删除类？我可以在那里触发一些 JS（.remove 有效），但 classList.add 不能。我错过了什么？

let observerOptions = {
rootMargin: '0px',
threshold: 0.5
}

var observer = new IntersectionObserver(observerCallback, observerOptions);

function observerCallback(entries, observer) {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
          //do something
          // want to do entry.target.classList.add('square-transition');

        }
          // want to do entry.target.classList.remove('square-transition');
    });
};

let target = '.targetSelector';
document.querySelectorAll(target).forEach((i) => {
    if (i) {
        observer.observe(i);
    }
});

【问题讨论】：

标签： javascript intersection-observer

【解决方案1】：

您错过了一个 else 语句，只要条目不相交就会触发该语句。

function observerCallback(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('square-transition');
    } else {
      entry.target.classList.remove('square-transition');
    }
  });
};

【讨论】：