Vanilla JavaScript，与作为类组一部分的单个DOM元素交互，而不会影响组中的其他元素

我正在尝试创建一些项目（在本例中为云），一旦到达浏览器的最右侧，第三个位置将重置为0（屏幕的最左侧）或更少，循环应继续。 每个云的位置都应该独立于其他云进行重置，但在我的例子中，每次云到达目标时，它们都会被重置，我不知道为什么

我有一系列DOM元素：

<div class="cloud" id="c1"></div>
<div class="cloud" id="c2"></div>
<div class="cloud" id="c3"></div>

var clouds = document.querySelectorAll(".cloud");

我有第一个循环来设置一些css属性：

for(let i=0; i < clouds.length; ++i){
  setUp(clouds[i]);
  }

function setUp(item){
  item.style.transform = `translate3d(0px, 0px, 0px)`;
}

更正： 正如@AlexWayne所指出的，这是一个小问题，通过在设置函数中分离项目的位置来解决。 以以下形式：

item.style.transform = `translate3d(${i * 100}px, 0px, 0px)`;

如图所示。 虽然很奇怪，为什么会出现如下类似的版本

---

不工作。

您好，欢迎来到stackoverflow！ 我想您可能会喜欢纯CSS解决方案，因为您在javascript中所做的大多数事情都是操纵CSS

如果你需要进一步的帮助，请告诉我

@关键帧示例{
0% {
变换：translateX（0）；
}
100% {
转换：translateX（100vh）；
}
}
.云{
背景颜色：灰色；
宽度：50px；
高度：50px；
利润率：10px；
转换：转换。7秒易进易出；
动画名称：示例；
动画持续时间：4s；
动画迭代次数：无限；
}
.云：第n个孩子（1）{
背景色：番茄；
动画延迟：0.5s；
}
.云：第n个孩子（2）{
背景色：热粉红色；
动画延迟：1s；
}
.云：第n个孩子（3）{
背景颜色：绿黄色；
动画延迟：1.5s；
}

---

云同时重置的原因是，每次对每个云进行相同的转换

function setUp(item) {
    item.style.transform = `translate3d(0px, 0px, 0px)`; // set all clouds to 0 on the x-axis.
}

setInterval(function(){
   clouds.forEach(increment); // Every 700ms, shift each cloud along the x-axis by 1px.  
},700)

由于初始偏移定位由

setUp

设置，因此

translate3d（${newVal}px，0px，0px）

对于所有云都是相同的。如果您要更改

设置

，使每个云在x轴上以不同的初始量进行变换，则您的例程将正常工作

（函数（）{
var clouds=document.queryselectoral（“.cloud”）；
for（设i=0；i=window.innerWidth/3？0:xVal+5；
item.style.transform=`translate3d（${newVal}px，0px，0px）`；
item.style.background='红色'；
}
setInterval（函数（）{
云。forEach（增量）；
}, 100)
})（）；

.cloud{
边框：1px纯黑；
宽度：200px；
高度：25px；
}
.cloud:第n个子项（0）{
位置：绝对位置；
顶部：280px；
左：80px；
}
.云：第n个孩子（1）{
位置：绝对位置；
顶部：75px；
左：206px；
}
.云：第n个孩子（2）{
位置：绝对位置；
顶部：150px；
左-12px；
}

您的脚本看起来似乎没有过滤节点以跟踪每个节点及其位置。它只是针对所有可用节点统一执行增量样式。@StevenVanSant我将如何按照您所说的方式过滤节点？请创建一个，因为我这样做了，而且我根本无法复制：（我修复了

xVal

赋值，因为它将

1

添加到字符串中，导致位置从1到11，然后是111，然后是1111）也许你应该随机设置它们的初始位置，这样它们就不会从同一个位置开始了？如果你让它们从不同的位置开始，这似乎很好。谢谢你的想法，尽管我正在寻找JS版本。你想解释一下为什么吗？你打算在云到达视口末端时触发更多东西吗？

function setUp(item) {
    item.style.transform = `translate3d(0px, 0px, 0px)`; // set all clouds to 0 on the x-axis.
}

setInterval(function(){
   clouds.forEach(increment); // Every 700ms, shift each cloud along the x-axis by 1px.  
},700)