Java语言使用forEach动画多个节点

Question

我正在尝试通过document.getElementsByClassName（）为多个帮助图标设置动画。我知道它会返回一个类似Array的对象，它实际上是具有相同类的所有元素的节点列表，我也知道我可以通过附加要访问的节点的index [4]来访问单个项。但是我不确定如何访问我尝试过的所有节点[*]。animate（），但是没有用。我也尝试了下面列出的forEach =>函数，但是仍然无法正常工作，我没有尝试[0-8]。任何人都可以发现我在做什么错，我知道我可以将它包装在for，while或forEach循环甚至是switch语句中，但这是我到目前为止的代码

const infIco = document.getElementsByClassName('helpIco')[*].forEach(item =>{
    item.addEventListener('mouseover',(e) => {
        this.animate([
            { transform: 'scale(1)', opacity:1},
            { transform: 'scale(1.42) rotate(22deg)', opacity: .8},
            { transform: 'scale(1)', opacity: 1},
                ], {
                duration: 1560,           // ms
                easing: 'ease-in-out',    // 'linear', bezier curve, etc..cubic-bezier(.43,.95,.85,.14)
                delay: 4,                 // ms
                iteration: Infinity,      // Or number
                direction: 'normal',      // 'normal', 'reverse' etc...
                fill: 'forwards'          // 'backwards', 'both', 'none', 'auto.'
        })
      // Todo...
    })
});

我知道.animate（）部分正在工作，因为我也将此附加到另一个项目上并且工作正常。有时可能会出现一点故障，但这很可能是由于使用了旧的图形卡和粗糙的计算机。

Answer 1

您可以使用Array.from( list )方法或...扩展运算符，从节点列表中创建一个实际的数组：

Array.from( document.getElementsByClassName('helpIco') ).forEach( function(){ /*...*/ });

[ ...document.getElementsByClassName('helpIco') ].forEach( function(){ /*...*/ });

但是getElementsBy...返回一个“实时”列表，如果使用了其中的任何元素，该列表每次都会更新...在大多数情况下，最好改用querySelectorAll('.class-with-dot')。它仅收集一次节点列表，并且具有内置的forEach方法。