0

找到合适的班级我没有什么问题。我正在制作滑块，我想在名为“is-active”的类的最后一个元素上设置 margin-left。我无法在 js 中找到这个类，但在 web 的控制台中它是可用的。是什么原因以及如何获得最后一类元素？

document.addEventListener('DOMContentLoaded', function () {
    new Splide('.splide', {
        perPage: 5,
        perMove: 1,
        breakpoints: {
            500: {
                perPage: 2,
            },
            640: {
                perPage: 3,
            },
            780: {
                perPage: 4,
            }
        }
        // autoWith: true,
    }).mount();
});
const list = document.querySelectorAll('.splide__slide')
list.forEach(li => {
    console.log(li.classList.contains('is-visible'));

});
.splide img {
     height: 20vh;
}
 .splide__arrow--prev {
     margin-right: 100px;
}
 .splide__slide__container {
     text-align: center;
}
 .splide__list {
     width: 100px;
}
 .info {
     display: grid;
     grid-template-columns: 57.12vw 14.28vw 28.56vw;
     grid-template-rows: 20vh;
}
 .info__logo-wrapper {
     background: #cecece;
     justify-self: center;
     width: 100%;
}
 .info__logo {
     height: 100%;
     width: 100%;
     padding: 0 2vw;
}
 .description {
     display: flex;
     flex-direction: column;
     text-transform: uppercase;
}
 .description--flex {
     height: 100%;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .description__header {
     font-weight: 700;
     font-family: 'Lato', sans-serif;
     color: grey;
     font-size: 1.25rem;
}
 @media (min-width: 1000px) {
     .description__header {
         font-size: 1.75rem;
    }
}
 .description__color {
     font-size: 0.75rem;
}
 @media (min-width: 1000px) {
     .description__color {
         font-size: 1.25rem;
    }
}
 .description__size {
     font-weight: 700;
     font-size: 1rem;
     color: black;
}
 @media (min-width: 1000px) {
     .description__size {
         font-size: 1.5rem;
    }
}
 .description--background {
     background-color: #ebebeb;
}
 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <section class="info">
        <div class="splide">
            <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide__slide">
                        <div class="splide__slide__container">
                            <img src="https://via.placeholder.com/150/0000FF ">
                        </div>
                    </li>
                    <li class="splide__slide">
                        <div class="splide__slide__container">
                            <img src="https://via.placeholder.com/150/FF0000">
                        </div>
                    </li>
                    <li class="splide__slide">
                        <div class="splide__slide__container">
                            <img src="https://via.placeholder.com/150/0000FF/808080 ">

                        </div>
                    </li>
                    <li class="splide__slide">
                        <div class="splide__slide__container">
                            <img src="https://via.placeholder.com/150/FF0000">
                        </div>
                    </li>
                    <li class="splide__slide">
                        <div class="splide__slide__container">
                            <img src="https://via.placeholder.com/150/0000FF/808080 ">
                        </div>
                    </li>
                    <li class="splide__slide">
                        <div class="splide__slide__container">
                            <img src="https://via.placeholder.com/150/FF0000">
                        </div>
                    </li>
                    <li class="splide__slide">
                        <div class="splide__slide__container">
                            <img src="https://via.placeholder.com/150/0000FF/808080 ">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="info__logo-wrapper">
        </div>
        <div class="description">
            <div class="description--flex">
            </div>
            <div class="description--flex">
            </div>
            <div class="description--flex description--background">
            </div>
        </div>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
</body>

</html>

如果我在控制台中输入相同的 js 中的内容，则有 5 个真和 2 个假。为什么这些元素在脚本中不可用？

4

0 回答 0