4

我正在使用 IntersectionObserver API。

输入特定部分时，background-color会更改。为了处理这个问题，我必须在此处 调用
的数组中获取输入条目的索引。IntersectionObserverEntryentries

我使用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));

结果如下...

相交 0
离开 0
离开 0 .....

我的代码有什么问题？为什么索引总是0，但通过获得的索引访问会导致正确的元素？

编辑

条目日志

4

5 回答 5

0

您可以访问entryforEach 内部的索引，无需使用 indexOf()。

entries.forEach((entry, i) => console.log(i))

MDN web docs 有很好的文档，有很好的例子，大多数时候你可以在那里找到你需要的东西，这里是 forEach 方法的链接

于 2019-07-31T08:19:55.167 回答
0

您可以根据观察到的元素检查进入目标。所以是这样的：

const elementList = document.querySelectorAll('.list-of-elements')

const observer = new IntersectionObserver((entries) => {
  for(const entry of entries) {
    if (entry.isIntersecting) {
      // compare target to element list
      const currentIndex = elementList.indexOf(entry.target)
    }
  }
})

Array.from(elementList).forEach(element => observer.observe(element))
于 2021-11-15T13:59:36.790 回答
0

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

请阅读下面的评论，我已将保存索引的代码行（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

于 2021-01-14T21:11:21.937 回答
0

您正在记录不是来自元素数组的条目的索引

fadeInElemes.forEach((fadeInElem) => intersectionObserver.observe(fadeInElem));

这是您获得实际寻找的索引的地方

于 2020-12-20T12:23:23.687 回答
0

比较对象时，IndexOf 可能无法按预期工作：

const user1 = {name : "nerd", org: "dev"};
const user2 = {name : "nerd", org: "dev"};
const eq = user1 == user2;
console.log(eq); // gives false

const myArr = [user1, user2];
console.log(myArr.indexOf(user1)); // gives 0 because same instance
console.log(myArr.indexOf(user2)); // gives 1 because same instance

const myArr2 = [{name : "nerd", org: "dev"}, {name : "nerd", org: "dev"}];
console.log(myArr2.indexOf(user1)); // gives -1 because not same instance
console.log(myArr2.indexOf(user2)); // gives -1 because not same instance

如果IndexOf()是 returnig 0，则表示当前条目实例与位置 0 中的条目实例相同。

看看你如何创建你的数组，也许条目在整个数组中包含相同的实例。

于 2019-07-31T08:28:56.467 回答