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

问题描述

我想用 JavaScript 制作一个自动滑块图像轮播，所以我在 JS 中动态创建了我的图像，为了处理它们的滑动，在 5 轮的 setNames(list(list(ICD10 = ICD10,ICD8 = ICD8,ATC = ATC)),variableName) 中为每个图像添加了 .imageSlide，

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

任何想法将不胜感激！

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%;
            }
        }

解决方法

您可以将该类应用于 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>