如何使用JS将一个元素的ID移动到另一个元素

Question

我正在尝试创建一个图标幻灯片。所有图标都在一个类中。另一个风格类称为"；活动的"；将具有一个ID并表示当前图片。单击左侧或右侧按钮应更改活动类的样式。

const leftArrow = document.getElementById('left-arrow');
const activeImg = document.getElementById('active') const nextImg = activeImg.nextElementSibling; // Handle left click leftArrow.addEventListener('click', function(){ activeImg.classList.remove('active');
nextImg.classList.add('active');
return nextImg
});

.icon-container i {
font-size: 150px;
position: relative;
left: 12rem;
top: 12rem;
z-index: -10;
display: none;
}
#active {
z-index: 10;
display: flex;
}
.left-arrow,
.right-arrow {
width: 50px;
height: 50px;
transition: .5s;
float: left;
box-shadow: -2px 2px 0 rgba(238, 0, 0, 0.5);
cursor: pointer;
}

<div class="object-container">
<div class="icon-container">
<i class="fa fa-car" id="active"></i>
<i class="fa fa-bicycle"></i>
<i class="fa fa-plane"></i>
<i class="fa fa-ship"></i>
<i class="fa fa-fighter-jet"></i>
<i class="fa fa-space-shuttle"></i>
</div>
<div class="arrow-buttons">
<a href="" class="right-arrow" id="right-arrow"></a>
<a href="" class="left-arrow" id="left-arrow"></a>
</div>
</div>

问题是，当我单击向左箭头时，什么都不会发生。我也试过用右箭头，但它甚至没有显示光标指针，所以我不知道哪里出错了。我玩过z索引和显示类型，但按钮似乎不起作用？

感谢

Answer 1

我建议使用类名而不是id

https://jsfiddle.net/sauz07d5/1

<div class="object-container">
<div class="icon-container">
<i class="fa fa-car active"></i>
<i class="fa fa-bicycle"></i>
<i class="fa fa-plane"></i>
<i class="fa fa-ship"></i>
<i class="fa fa-fighter-jet"></i>
<i class="fa fa-space-shuttle"></i>
</div>
<div class="arrow-buttons">
<button class="right-arrow" id="right-arrow"></button>
<button class="left-arrow" id="left-arrow"></button>
</div>
</div>

.icon-container i{
font-size: 150px;
position: relative;
left: 12rem;
top: 12rem;
z-index: -10;
display: none;
}

.left-arrow, .right-arrow{
width: 50px;
height: 50px;
transition: .5s;
float: left;
box-shadow: -2px 2px 0 rgba(238, 0, 0, 0.5);
cursor: pointer;
}
.active {
z-index: 10 !important;
display: flex !important;
}

const leftArrow = document.getElementById('left-arrow');
const rightArrow = document.getElementById('right-arrow');

// Handle left click
var element = document.querySelector(".icon-container")
function slideNext() {
let currentImg = document.querySelector(".active");
let nextImg = currentImg.nextElementSibling ? currentImg.nextElementSibling : element.children[0];
currentImg.classList.remove("active");
nextImg.classList.add("active");
}
function slidePrevious() {
let currentImg = document.querySelector(".active");
let previousImg = currentImg.previousElementSibling ? currentImg.previousElementSibling : element.children[element.children.length - 1];
currentImg.classList.remove("active");
previousImg.classList.add("active");
}

leftArrow.addEventListener('click', slideNext);
leftArrow.addEventListener('touch', slideNext);
rightArrow.addEventListener('click', slidePrevious);
rightArrow.addEventListener('touch', slidePrevious);

Answer 2

var icons = [...document.querySelectorAll('.icon-container .fa')];
function adjustActive (adjustment) {
var current = icons.find(it => it.id === 'active');
var currentIndex = icons.indexOf(current);
var nextIndex = (currentIndex + adjustment) % icons.length;

if (nextIndex < 0) nextIndex = icons.length - 1;

current.removeAttribute('id');
icons[nextIndex].id = 'active';
}
document.querySelector('#left-arrow').addEventListener('click', e => adjustActive(-1));
document.querySelector('#right-arrow').addEventListener('click', e => adjustActive(1));

#active {
color: red;
}

<div class="object-container">
<div class="icon-container">
<i class="fa fa-car" id="active">Car</i>
<i class="fa fa-bicycle">Bike</i>
<i class="fa fa-plane">Plane</i>
<i class="fa fa-ship">Ship</i>
<i class="fa fa-fighter-jet">Jet</i>
<i class="fa fa-space-shuttle">Shuttle</i>
</div>
<div class="arrow-buttons">
<a href="#" class="left-arrow" id="left-arrow">Prev</a>
<a href="#" class="right-arrow" id="right-arrow">Next</a>
</div>
</div>

虽然通常最好四处移动类，但您可以(如果必须的话(四处移动id。上面的示例使用id来查找活动元素，并使用活动元素在元素数组中的位置，通过调整当前索引来查找下一个元素。然后，这是一个简单的问题，从旧电流中删除id，并将其放在新电流上。

Answer 3

与其将active用作ID，不如将其用作类，如下所示：

<div class="icon-container">
<i class="fa fa-car active"></i>
<i class="fa fa-bicycle"></i>
<i class="fa fa-plane"></i>
<i class="fa fa-ship"></i>
<i class="fa fa-fighter-jet"></i>
<i class="fa fa-space-shuttle"></i>
</div>

只需为左键和右键创建click监听器，从当前项中删除active class，并将其添加到其上一个或下一个同级项中。

或者，如果你认为不值得花时间创建自己的实现，你也可以使用一个已经可用的实现，比如Owl Carousel