Javascript 交叉点观察者不与兄弟节点一起工作

我有一个装有4个孩子的flexbox容器，每个都有：50%

我想为每个子元素创建一个IO交点观察者，但由于某些原因，它只适用于1º和3º元素。。。但如果我为2º和4º元素创建一个新IO，它就可以工作了

我做错了什么

---

演示如下：

您的代码如下所示：

const watchContainer = ([entry]) => {
    console.log('IO card:', entry.target);
    entry.target.style.opacity = entry.isIntersecting ? '1' : '0';
};

const watchContainer = (entries) => {
    entries.forEach(entry => {
        console.log('IO card:', entry.target);
        entry.target.style.opacity = entry.isIntersecting ? '1' : '0';
    })
};

它必须是这样的：

const watchContainer = ([entry]) => {
    console.log('IO card:', entry.target);
    entry.target.style.opacity = entry.isIntersecting ? '1' : '0';
};

const watchContainer = (entries) => {
    entries.forEach(entry => {
        console.log('IO card:', entry.target);
        entry.target.style.opacity = entry.isIntersecting ? '1' : '0';
    })
};

---

按照您的方式，如果多个元素同时触发观察者，它将只在第一个元素上运行函数。按照我的方式，它会在匹配的每个条目上运行它。

您的代码如下：

const watchContainer = ([entry]) => {
    console.log('IO card:', entry.target);
    entry.target.style.opacity = entry.isIntersecting ? '1' : '0';
};

const watchContainer = (entries) => {
    entries.forEach(entry => {
        console.log('IO card:', entry.target);
        entry.target.style.opacity = entry.isIntersecting ? '1' : '0';
    })
};

它必须是这样的：

const watchContainer = ([entry]) => {
    console.log('IO card:', entry.target);
    entry.target.style.opacity = entry.isIntersecting ? '1' : '0';
};

const watchContainer = (entries) => {
    entries.forEach(entry => {
        console.log('IO card:', entry.target);
        entry.target.style.opacity = entry.isIntersecting ? '1' : '0';
    })
};

---

按照您的方式，如果多个元素同时触发观察者，它将只在第一个元素上运行函数。按照我的方式，它会在每个匹配的条目上运行。

没问题：希望我有更多的交叉口观察者经验，这是一个很酷的api。@sandrina-p如果它对您有帮助，请不要忘记将其标记为正确无问题：希望我有更多的交叉口观察者经验，这是一个很酷的api。@sandrina-p如果对您有帮助，请不要忘记将其标记为正确