为什么另一个实例方法调用没有运行？

Question

在我的 JavaScript 中，我有一个用于 Image class 的 move() 方法，它应该为 Image class，当他们的 move() 方法被调用时，参数是他们的数字 ids，

第一次调用方法 Image1.move(1); 并在 move() 方法中为第一个 Image 实例设置动画，但是，我已将下一个实例声明为运行 move() 方法的参数是 id，但除了实例 Image1 之外，没有其他实例运行调用 move() 方法，为什么会这样？以及如何在调用时将其他实例设为运行 move() 方法？

document.addEventListener('DOMContentLoaded', function (event) {
        let slidingChoices = {
            slideCount: 3,
            slidingDuration: 1000,
            slidePause: 2500,
        }
        let sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
        let sliderWrapperWidth = sliderWrapper.offsetWidth;
        class Image {
            constructor(_src, _id) {
                this.src = _src;
                this.id = _id;
                this.appear()
            }
            appear() {
                let img = document.createElement('img');
                img.setAttribute("src", this.src);
                img.id = this.id;
                img.classList.add('img');
                sliderWrapper.appendChild(img);
                img.style.left = `${sliderWrapperWidth}px`;
                img.onload = function() {
                    sliderWrapper.style.height = `${img.height}px`;
                }
                document.getElementById('1').style.left = '0';
            }
            move(which) {
                let NextImageNumber;
                window.onload = function() {  document.getElementById(which).style.left = '0px';
                    document.getElementById(which).style.transition =  slidingChoices.slidingDuration + 'ms';
                    if (document.getElementById(which).style.left === '0px') {
                        setTimeout(function () {
                            document.getElementById(which).style.left = -sliderWrapperWidth + 'px';
                            document.getElementById(which).style.transition = slidingChoices.slidingDuration + 'ms';  document.addEventListener('transitionend', () => {
                                document.getElementById(which).style.left = sliderWrapperWidth + 'px';
                                document.getElementById(which).style.transition = 'none';
                            });
                            // Here is the problem
                            NextImageNumber = (which + 1 < slidingChoices.slideCount ) ? which + 1 : 1;
                            eval(`Image${NextImageNumber}.move(${NextImageNumber})`);
                        },slidingChoices.slidePause)
                    }
                }
            }
        }
        for (let i = 1; i <= slidingChoices.slideCount; i++) {
            eval(`Image${i} = new Image('https://via.placeholder.com/200/FFFF00/000000?Text=WebsiteBuilders.com', '${i}')`);
        }
        Image1.move(1);

    });

*{
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .slider-wrapper{
            position: relative;
            max-width: 200px;
            margin: 50px auto;
            box-sizing: content-box;
            border: 1px solid #000;
        }
        .slider-wrapper img{
            position: absolute;
            display: block;
        }

<div class="slider-wrapper">
</div>

Answer 1

Image 是内置 JS class 的名称，在严格模式下 eval 将无法访问您覆盖的 class，因此它正在调用本机图像 class 而不是您定义的图像，本机图像没有 move 方法。您可能应该重命名 class.

此外，不会在您每次调用 move() 时调用 window.onload。那应该在顶层，而不是在你的移动方法中。

为什么另一个实例方法调用没有运行？

Why another instance method call doesn't run?

javascript

methods

instance

invoke

为什么另一个实例方法调用没有 运行？

Why another instance method call doesn't run?

javascript

methods

instance

invoke

为什么另一个实例方法调用没有运行？