Javascript InterActionObserver（）只观察行的第一个元素，而不是所有元素

我正在试验IntersectionObserver（），它的行为很奇怪：我使用了一个非常简单的布局，只有8个图像与flexbox在同一个div中，使用wrap，因此基本上这8个图像根据视口的大小将自己定位在不同的行中。我首先对每个元素应用一个过滤器类（它添加了一个模糊过滤器），然后在屏幕上显示这些元素时将其删除：

HTML:

---

事实上，观察者实际上只观察每一行的第一个元素，所以如果我有两行，它只得到第一个和第五个图像，如果我有三行，它得到第一个、第四个和第七个图像，依此类推。我确实把它应用到了所有的图片上。它为什么这样做？谢谢你的回答

只有第一个正在更改，因为这是您在更改颜色功能中的全部目标。“entries”数组包含所有正在观察的项目，您需要检查“isIntersecting”属性，如下所示：

const changeColor = function(entries) {
  entries.forEach(entry => {
    if(entry.isIntersecting) {
      entry.target.style.background = 'blue';
    } else {
      entry.target.style.background = 'red';
    }
  })
}

来自MDN文档

let callback = (entries, observer) => {
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
};

---

你能在stackblitz中重现这个问题吗？我试试看。我会在代码笔中写出来的，但这说明了问题所在。我希望所有的正方形都变成蓝色，但只有每行的第一行变成蓝色，这是一个非常完整和直截了当的答案。非常感谢你，安德鲁！

const changeColor = function(entries) {
  entries.forEach(entry => {
    if(entry.isIntersecting) {
      entry.target.style.background = 'blue';
    } else {
      entry.target.style.background = 'red';
    }
  })
}

let callback = (entries, observer) => {
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
};