javascript - 添加事件类的 slider

Question

晚上好，我有一个 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>

Answer 1

我相信有更好的方法可以使用数据属性来完成此操作，但是使用您的示例我已经发布了我的解决方案。由于在任何时候都只有一个事件元素，因此您不需要 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]
    });
}