如何使Counterup 2 JS插件对所有含.number类的元素生效？

我使用Counterup 2 JS插件实现数字滚动递增动画，原代码如下：

const counterUp = window.counterUp.default

const callback = entries => {
    entries.forEach( entry => {
        const el = entry.target
        if ( entry.isIntersecting && ! el.classList.contains( 'is-visible' ) ) {
            counterUp( el, {
                duration: 2000,
                delay: 16,
            } )
            el.classList.add( 'is-visible' )
        }
    } )
}

const IO = new IntersectionObserver( callback, { threshold: 1 } )

const el = document.querySelector( '.info-bubble .title .number' )
IO.observe( el )

这段代码仅对第一个匹配.info-bubble .title .number的元素生效，页面中有两个带.number类的元素，滚动时只有一个会执行动画。我尝试用document.querySelectorAll()但没成功，请问如何修改代码让所有带.number类的元素都能触发动画？

原代码中document.querySelector()只会返回第一个匹配的元素，因此只监听了单个元素。要适配多个元素，只需修改获取元素和添加监听的逻辑，具体修改后的完整代码如下：

const counterUp = window.counterUp.default

const callback = entries => {
    entries.forEach( entry => {
        const el = entry.target
        if ( entry.isIntersecting && ! el.classList.contains( 'is-visible' ) ) {
            counterUp( el, {
                duration: 2000,
                delay: 16,
            } )
            el.classList.add( 'is-visible' )
        }
    } )
}

const IO = new IntersectionObserver( callback, { threshold: 1 } )

// 获取所有匹配选择器的元素集合
const els = document.querySelectorAll( '.info-bubble .title .number' )
// 遍历集合，为每个元素添加监听
els.forEach(el => IO.observe(el))

修改要点： #

1. 用document.querySelectorAll()替代document.querySelector()，获取所有符合选择器规则的元素；
2. 通过forEach遍历元素集合，为每个元素单独注册IntersectionObserver监听；
3. 原回调函数逻辑无需改动，它会自动处理每个元素的交叉状态，且通过is-visible类确保每个元素仅触发一次动画。

这样所有带.number类的元素在进入视口时，都会触发数字递增动画。

内容的提问来源于stack exchange，提问作者Juraj