晚上好,我有一个 slider 。它通过添加事件类来改变背景来工作。 我可以添加类“.active”,但我不能在不需要的 block 中删除类“.active”。在类“slider__image”中它最多需要一个类“active”。 那么我怎样才能正确地删除这个“.active”类呢?希望对你有所帮助!非常感谢!
let sliderImage = document.querySelectorAll('.slider__image');
let sliderActiveImage = document.querySelectorAll('.slider__image.active');
let sliderBtn = document.querySelectorAll('.slider-button');
for(let i = 0; i < sliderBtn.length; i++){
sliderBtn[i].addEventListener("click", function(){
sliderActiveImage.forEach((element) => {
if(sliderImage[i] != element){
sliderImage[i].classList.add("active");
}
});
});
}
.slider {
display: flex;
justify-content: center;
align-items: flex-end;
position: relative;
margin-top: 40px;
border-radius: 25px;
height: 400px;
width: 900px;
&__image {
position: absolute;
border-radius: inherit;
width: 100%;
height: 100%;
opacity: 0;
transform: translateX(100%);
background-position: center center;
background-size: cover;
transition: transform 0.5s ease-in-out, opacity 0.5s linear;
img {
width: 100%;
height: 100%;
border-radius: inherit;
}
&.active {
opacity: 1;
transform: translateX(0%);
}
}
.slider-btns {
margin-bottom: 15px;
z-index: 9999;
label {
margin: 0 20px;
margin-bottom: 15px;
position: relative;
&::before {
position: absolute;
content: "";
width: 10px;
height: 10px;
display: inline-block;
background-color: #fff;
cursor: pointer;
border-radius: 100%;
}
}
input {
display: none;
&:checked + label::before {
transition: 0.2s ease-in;
width: 20px;
border-radius: 8px;
background-color: yellow;
}
}
}
}
<div class="slider">
<div class="slider__image"><img src="/images/slider/pizza-background.jpg" alt=""></div>
<div class="slider__image active"><img src="/images/slider/burger-background.jpg" alt=""></div>
<div class="slider__image"><img src="/images/slider/soup-background.jpg" alt=""></div>
<div class="slider__image"><img src="/images/slider/sushi-background.jpg" alt=""></div>
<div class="slider-btns">
<input type="radio" name="slider button" id="slider-btn-1">
<label class="slider-button" for="slider-btn-1"></label>
<input checked type="radio" name="slider button" id="slider-btn-2">
<label class="slider-button" for="slider-btn-2"></label>
<input type="radio" name="slider button" id="slider-btn-3">
<label class="slider-button" for="slider-btn-3"></label>
<input type="radio" name="slider button" id="slider-btn-4">
<label class="slider-button" for="slider-btn-4"></label>
</div>
</div>
最佳答案
我相信有更好的方法可以使用数据属性来完成此操作,但是使用您的示例我已经发布了我的解决方案。由于在任何时候都只有一个事件元素,因此您不需要 querySelectorAll 您的事件图像。相反,您可以简化,首先只选择事件图像,然后在每个按钮上单击开始删除它。然后将事件类添加到 sliderImage[i]
并重置您的 sliderActiveImage
。希望这会有所帮助。
这是一个链接,可以向您展示我的意思。
https://codepen.io/bilcker/pen/bGNYaJZ#code-area
将您的 JS 替换为:
let sliderImage = document.querySelectorAll('.slider__image');
let sliderActiveImage = document.querySelector('.slider__image.active');
let sliderBtn = document.querySelectorAll('.slider-button');
for(let i = 0; i < sliderBtn.length; i++){
sliderBtn[i].addEventListener("click", function(){
sliderActiveImage.classList.remove('active')
sliderImage[i].classList.add("active");
sliderActiveImage = sliderImage[i]
});
}
关于javascript - 添加事件类的 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59534890/