javascript - 为什么 IntersectionObserver 返回的数组中 forEach 的索引始终为 0？

Question

我正在使用 IntersectionObserver API。

当进入特定部分时，background-color 会发生变化。
为了处理这个问题，我必须获取此处名为 entries 的 IntersectionObserverEntry 数组中输入条目的索引。

我使用forEach方法来获取条目的索引，但奇怪的是它总是将索引设置为0。但是当我通过获得的索引访问条目时，它工作得很好。

const intersectionObserver = new IntersectionObserver(entries => {
  entries.forEach((entry,index) => {
    if(entry.isIntersecting) {
      console.log('Intersecting',index);
      entry.target.className = entry.target.className.replace('hidden','fadeIn');
      changeBackgroundColor(entry.target.dataset.color);
      changeLogoColor(entry.target.dataset.theme);
    } else {
      console.log('Leave',index);
      entry.target.className = entry.target.className.replace('fadeIn','hidden');
    }
  });
});
const fadeInElemes = document.querySelectorAll('.hidden');
fadeInElemes.forEach((fadeInElem) => intersectionObserver.observe(fadeInElem));

结果如下...

Intersecting 0
Leave 0
Leave 0 .....

我的代码有什么问题吗？为什么索引总是0，但是通过获取的索引访问却得到了正确的元素？

编辑

Log of entries

Answer 1

在观察者中注册元素之前，您可以将索引链接到元素的属性。 重要!您的属性名称应该是唯一的，以避免覆盖标准属性。

请阅读下面的评论，我已将保存索引的代码行(18 行)和读取的代码行(5 行)分开。

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {

        // read index from element’s property
        let index = entry.target.elems_index;

        if (entry.isIntersecting) {
            console.log(index, entry.target, 'is visible');
        } else {
            console.log(index, entry.target, 'is hidden');
        }
    })
});
let elems = document.querySelectorAll('.elem');
elems.forEach((elem, index) => {

    // save index as element’s property before register the element in observer
    elem.elems_index = index;

    observer.observe(elem);
});

打开笔的控制台以查看结果:https://codepen.io/rafaylik/pen/jOMQQdd