class 更改后 appendChild 没有响应 - VANILLA Javascript

Question

我找到了暗示这个问题的答案，但大多数答案似乎都是基于 jQuery。作为练习，我在 jQuery 和 Javascript 中构建了一个图像滑块应用程序。我想了解 jQuery 在幕后做了什么，并能够根据项目决定是否使用它。

我的问题是：当我点击下一步按钮时，我希望图库向左滑动，prevImg 将被删除，currentImg 将成为下一个等等。然后，我将使用适当的 class nextImg 和图像添加一个 li 元素。

一切正常，但代码行 nextImg.appendChild(next_ImgPath) 没有附加图像。

function slideAnimSetting(direction) {
    counterAction();

    if (direction == 1) {
        establishImgPaths();

        for (var i = 0; i < innerListEl.length; i++) {
            leftPosition = innerListEl[i].offsetLeft;   
            topPosition = innerListEl[i].offsetTop;
            Tween.to(innerListEl[i], 1, {left: leftPosition-700});
        };  // end for  

        prevImg.removeAttribute('class');
        currentImg.className = 'prevImg';
        nextImg.className = 'currentImg';

        listEle = document.createElement('li');
        listEle.className = 'nextImg';

        for (var i = 0; i < innerUlEl.length; i++) {
            innerUlEl[i].appendChild(listEle);
        }; //end for

        nextImg = document.getElementsByClassName('next-img');
        nextImg = nextImg[0];
        nextImg.appendChild(next_ImgPath);

        setImageStyles();
    }
}; // end slideAnimSetting

console.log 告诉我 nextImg 未定义。

Answer 1

您为其指定的类名 nextImg，但您正在搜索 next-img。

class 更改后 appendChild 没有响应 - VANILLA Javascript

appendChild is not responding after class change - VANILLA Javascript

html

javascript

css

frontend

appendchild