Javascript 如何为每个相同的类元素使用document.queryselectoral的js函数

下面是在复选框处于活动状态后运行的动画效果。它可以正常工作，但这只适用于具有

class=“text”

的一个元素。但是我想对每个具有

class=“text”

的元素使用它

我怎么能做到这一点，我试过了，但没有成功

我的全部代码如下：

函数myTYPINGFunction（）{
var checkBox=document.getElementById（“myCheck”）；
var textWrapper=document.querySelector（'.text'）；
如果（checkBox.checked==true）{
textWrapper.innerHTML=textWrapper.textContent.replace（/（\S*）/g，m=>{
返回`+
m、 替换（/（-）？\S（-））/g，“$&”）+
``;
});
var targets=Array.from（document.querySelectorAll（'.text.letter'）；
动画时间线({
循环：对，
})
.添加({
目标:目标,，
比例：[3,1]，
斯卡利：[1.5,1]，
不透明度：[0,1]，
翻译Z:0，
放松：“easeOutExpo”，
持续时间：400，
延迟：（el，i）=>60*i
}).添加({
不透明度：0，
持续时间：50000，
放松：“easeOutExpo”，
延误：800
})
$（“.text”）.removeClass（'zoomIn2'）；
}否则{
setTimeout（函数（）{
textWrapper.innerHTML=textWrapper.textContent.replace（/（]+）>）/gi，“”；
}, 550);
var targets=Array.from（document.querySelectorAll（'.text.letter'）；
动画时间线({
循环：false，
})
.添加({
targets:targets.reverse（），
比例：[1,2]，
斯卡利：[1,1.5]，
不透明度：[1,0]，
翻译Z:0，
放松：“easeOutExpo”，
持续时间：30，
延迟：（el，i）=>25*i
});
setTimeout（函数（）{
$（“.text”）.addClass（'zoomIn2'）；
}, 500);
}
}

.word{
边框：1px纯红；
}
.信{
边框：1px纯色浅蓝色；
}
input.largerCheckbox{
宽度：20px；
高度：20px；
}
.zoomIn2{
动画：缩放两个1000毫秒
}
@关键帧缩放2{
从{
不透明度：0；
变换：scale3d（0,0,0）；
}
50% {
不透明度：1；
}
}

键入.Eff：
复选框已选中！
复选框已选中您需要使用class
text
获取所有元素，并迭代这些元素。您可以通过方法
querySelector all
而不是
querySelector
来执行此操作

querySelector
始终只返回第一个匹配的元素

然后可以使用forEach方法使用类文本迭代每个元素。动画将添加到每个元素中

以下是您需要更改的部分代码：

var textWrappers=document.querySelectorAll（'.text'）；
textWrappers.forEach（textWrapper=>{

您还需要更改此行：

var targets=Array.from（textWrapper.querySelectorAll（'.letter'）；

以下是工作代码：



.word{边框：1px实心红色；}
.字母{边框：1px实心浅蓝色；}
input.largerCheckbox{
宽度：20px；
高度：20px；
} 
.zoomIn2{
动画：缩放两个1000毫秒
}
@关键帧缩放2{
从{
不透明度：0；
变换：scale3d（0,0,0）；
}
50% {
不透明度：1；
}
}
键入.Eff：
复选框已选中！
复选框已选中！
函数myTYPINGFunction（）{
var checkBox=document.getElementById（“myCheck”）；
var textWrappers=document.querySelectorAll（'.text'）；
textWrappers.forEach（textWrapper=>{
如果（checkBox.checked==true）{
textWrapper.innerHTML=textWrapper.textContent.replace（/（\S*）/g，m=>{
返回`+
m、 替换（/（-）？\S（-））/g，“$&”）+
``;
});
var targets=Array.from（textWrapper.querySelectorAll（'.letter'）；
动画时间线({
循环：对，
})
.添加({
目标:目标,，
比例尺：[3,1]，
斯卡利：[1.5,1]，
不透明度：[0,1]，
翻译Z:0，
放松：“easeOutExpo”，
持续时间：400，
延迟：（el，i）=>60*i
}).添加({
不透明度：0，
持续时间：50000，
放松：“easeOutExpo”，
延误：800
})
$（“.text”）.removeClass（'zoomIn2'）；
}否则{
setTimeout（函数（）{
textWrapper.innerHTML=textWrapper.textContent.replace（/（]+）>）/gi，“”；
}, 550);
var targets=Array.from（document.querySelectorAll（'.text.letter'）；
动画时间线({
循环：false，
})
.添加({
targets:targets.reverse（），
比例：[1,2]，
斯卡利：[1,1.5]，
不透明度：[1,0]，
翻译Z:0，
放松：“easeOutExpo”，
持续时间：30，
延迟：（el，i）=>25*i
}); 
setTimeout（函数（）{
$（“.text”）.addClass（'zoomIn2'）；
}, 500);
}
})
}
但它不在一起工作，第一个工作完成，第二个开始，我如何与所有元素plz PLZE一起运行动画即使需要更改类名，也无所谓是否选中了复选框！复选框已选中！我已编辑了我的代码段。您需要更改此行：
var targets=Array.from（textWrapper.querySelectorAll（'.letter'）；
不错，但第一个反向动画不工作意味着反向动画只在最后一个元素上工作。请解决此问题，尝试添加复选框已选中！再添加一个元素，请参阅