使用 JS 更改三个 div ID（轮播式），工作两次，但随后跳过 div

Question

我正在尝试创建一个所有三个项目都可见的旋转木马，并在单击导航时切换位置（目前仅在左箭头上工作）。

我这样做是通过使用 id 将每个 div 分配给一个位置，并使用 JS 更改 ids。

它按预期工作，但是当#pos3（香蕉）变成#pos1 时，由于某种原因它被跳过，#pos2 和#pos3 只是交换位置。

CSS:

#pos1{
left:10%;
}

#pos2{
left:30%;
z-index:2;
top:50px;
background:rgba(255,255,255,0.9);
}

#pos3{
left:60%;
}

JS

document.getElementById("left").onclick = function (){
  document.getElementById("pos2").setAttribute("id", "pos1");
  document.getElementById("pos3").setAttribute("id", "pos2");  
  document.getElementById("pos1").setAttribute("id", "pos3");    
};

Fiddle here

Answer 1

未经我自己测试，当您将 #pos2 更改为 #pos1 时，您最终会得到 2 个 ID 为 #pos1 的元素，因为原始 #pos1 尚未更改为 #pos3。因此，当代码到达将 #pos1 更改为 #pos3 的位置时，它正在更改两个元素，让您没有 #pos1。

Answer 2

document.getElementById("pos2").setAttribute("id", "pos1"); document.getElementById("pos3").setAttribute("id", "pos2");
document.getElementById("pos1").setAttribute("id", "pos3");

执行第三行时，pos1 不存在，因为您已经在第一行更改了它。

简单地引入一个临时id来解决这个问题。

document.getElementById("pos1").setAttribute("id", "temp"); document.getElementById("pos2").setAttribute("id", "pos1"); document.getElementById("pos3").setAttribute("id", "pos2");
document.getElementById("temp").setAttribute("id", "pos3");

使用 JS 更改三个 div ID（轮播式），工作两次，但随后跳过 div

Using JS to change three div IDs (carousel-esque), works twice, but then skips a div

javascript

z-index

carousel