向一个 JS 选择器添加类时，为什么所有元素都获取该类？答案

【问题标题】：When adding class to one JS selector, why all elements are getting the class?向一个 JS 选择器添加类时，为什么所有元素都获取该类？
【发布时间】：2021-07-23 02:44:10
【问题描述】：

我想用 JavaScript 制作一个自动滑块图像轮播，所以我在 JS 中动态创建了我的图像，并为了处理它们的滑动，在 for loop 中为每个图像添加了 .imageSlide，共 5 轮，

现在的问题是所有 5 张图像都获得了 imageSlide 类并同时移动，而我希望它们一个接一个地分别获得该类，我真的不明白为什么它们都一起获得该类以及我应该如何让他们一堂课，

任何想法都将不胜感激！

    const imageCount = 5;
    const eachImageWidth = 700;
    const eachImageHeight = 400;


    function createImage() {

        for ( i = 1; i <= imageCount; i++) {

            $('.main').css('width', eachImageWidth).css('height', eachImageHeight);
            img = document.createElement('img');
            $(img).addClass('create');
            $(img).attr('src', `https://1drv.ms/u/s!AsnL8xjiU2EjhUkjDE4wMF10MQ8_?e=SR5ah8/${i}.jpg`);
            $(img).attr('id', `image-${i}`);
            $('.img-wrapper').append(img);
        }

         images = document.querySelectorAll('.img-wrapper img');
        //console.log(images)
    }

    function foo() {
        for (j = 0; j <= imageCount; j++){
            $(images[j]).addClass('imageSlide')
        }
    }

    createImage();
    foo();

*{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .main{
            margin: 100px auto;
        }
        .images-storage-wrapper {
            height: 100%;
        }
        .images-storage-wrapper .img-wrapper{
            width: 100%;
            height: 100%;
            position: relative;
            /*overflow: hidden;*/
            display: flex;
        }
        .images-storage-wrapper .img-wrapper img.create{
            width: 100%;
            height: 100%;
        }
        .imageSlide{
            animation: swag 6s linear backwards;
        }
        @keyframes swag {
            0% {
                margin-left:  100%;
            }
            20%{
                margin-left:  0;
            }
            40%{
                margin-left: 0;
            }
            60%{
                margin-left: 0;
            }
            80%{
                margin-left: 0;
            }
            100% {
                margin-left: -100%;
            }
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
    <div class="images-storage-wrapper">
        <div class="img-wrapper">

        </div>
    </div>
</div>

【问题讨论】：

这是合乎逻辑的，因为您通过 for {} 循环 - images[j] 将每个元素添加到类中，但不是当前元素。
然后你应该添加随着时间间隔的类（如 setInterval），而不是在一个 for 循环中全部一起。

标签： javascript jquery jquery-selectors

【解决方案1】：

您可以将该类应用于animationend 上的下一个元素。

$(img).on("animationend", function(){
  var id = parseInt($(this).attr("data-id"));
  $(`#image-${id+1}`).addClass("imageSlide");
});

然后只需将类添加到第一张图像。

images = document.querySelectorAll('.img-wrapper img');
$(images[0]).addClass("imageSlide");

你的动画看起来有点时髦。您可能想查看它，但它确实会按照您的要求一次应用一个。

const imageCount = 5;
    const eachImageWidth = 700;
    const eachImageHeight = 400;


    function createImage() {

        for ( i = 1; i <= imageCount; i++) {

            $('.main').css('width', eachImageWidth).css('height', eachImageHeight);
            img = document.createElement('img');
            $(img).addClass('create');
            $(img).attr('src', `https://via.placeholder.com/200x200`);
            $(img).attr('id', `image-${i}`);
            $(img).attr("data-id", i);
            $('.img-wrapper').append(img);
            
            $(img).on("animationend", function(){
              var id = parseInt($(this).attr("data-id"));
              $(`#image-${id+1}`).addClass("imageSlide");
            });
        }

         images = document.querySelectorAll('.img-wrapper img');
         $(images[0]).addClass("imageSlide");
        //console.log(images)
    }

    createImage();

*{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .main{
            margin: 100px auto;
        }
        .images-storage-wrapper {
            height: 100%;
        }
        .images-storage-wrapper .img-wrapper{
            width: 100%;
            height: 100%;
            position: relative;
            /*overflow: hidden;*/
            display: flex;
        }
        .images-storage-wrapper .img-wrapper img.create{
            width: 100%;
            height: 100%;
        }
        .imageSlide{
            animation: swag 6s linear backwards;
        }
        @keyframes swag {
            0% {
                margin-left:  100%;
            }
            20%{
                margin-left:  0;
            }
            40%{
                margin-left: 0;
            }
            60%{
                margin-left: 0;
            }
            80%{
                margin-left: 0;
            }
            100% {
                margin-left: -100%;
            }
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
    <div class="images-storage-wrapper">
        <div class="img-wrapper">

        </div>
    </div>
</div>

【讨论】：