我如何做到这一点，但16个以上(对不起，混乱)

Question

我想对所有的名字使用这段代码，而不是每次都做一次预处理

html代码:

<div id="one" class="text-container"> 
<span> Campfire Cooking in Another World with my Absurd Skill</span> 
<div class="fader fader-left"></div>
<div class="fader fader-right"></div>
</div> 

Javascript代码:

let container1 = document.querySelector("#one");
let text1 = document.querySelector("#onespan");
if (container1.clientWidth < text1.clientWidth) { 
text1.classList.add("animate"); 
}

我试过那个代码，但是它只做了一个名字，而不是其他的。

Answer 1

这样做有帮助吗?

let container = document.querySelectorAll(".text-container");
let text = document.querySelectorAll("span");
for (let i=0; i<container.length; i++) {
if (container[i].clientWidth < text[i].clientWidth) {
text[i].classList.add("animate");
}
}

Answer 2

修复

而不是使用它的ID做基于一个元素的querySelector。我们可以使用querySelectorAll查询多个元素，并基于类进行查询，因为ID应该只使用一次。

// this will get all the 16 elements, as long as they use this class.
const containers = document.querySelectorAll(".text-container"); 


for (let i=0; i<containers.length; i++) {
// for each container we will need to find its text element we want to animate
const text = containers[i].querySelector("span");
if (containers[i].clientWidth < text.clientWidth) {
text.classList.add("animate");
}
}

代替for循环，你也可以使用许多人喜欢的forEach，因为它更容易阅读。如果你更喜欢for循环，那就坚持下去吧!

// this will get all the 16 elements, as long as they use this class.
const containers = document.querySelectorAll(".text-container"); 

containers.forEach((container) => {
// for each container we will need to find its text element we want to animate
const text = container.querySelector("span");

if(container.clientWidth < text.clientWidth) {
text.classList.add("animate");
}
})      
}

建议我建议为这16个元素添加一个不会意外重用的特定类。这更有可能使用像.text-container这样的通用名称，而不是像.js-animated-card这样的名称。

添加js-作为前缀可以帮助您轻松地将用于样式的类和添加到JS中查询元素的类分开。这样，你还可以移动/编辑/重命名你的样式类，而不会有可能破坏你的javascript代码的风险。