javascript - 为什么我不能删除这个对象的类/属性

Question

我有一系列 div，其中有另一个 div，其中附加了几个 imgs。我正在尝试旋转这些图像(应用 css 转换)，为此我制作了一个 Javascript 对象来跟踪 div 和 subdivs，以及图像。我通过它们旋转的方式是为对象制作三个数组。一个 showing staging 和 holding 数组。显示图像时，它被放入 showing 数组中，之前显示的图像被放入 staged 数组中，然后被放入 holding array。将图像添加到对象的 showing 数组时，我还在其上设置了类(这就是转换的完成方式)。出于某种原因，我可以轻松添加该类，但我无法删除该类，这意味着我的动画最终会停止。我将类添加到数组中的对象中，而不是使用 queryselector 但它应该可以工作，至少我认为是这样。

使用 devTools 我可以看到正在添加但没有删除的类。这真的很困扰我。

这是我的Javascript:

var containerHolders = [];
    var imageHolders = [].slice.call(document.querySelectorAll("div.imageContent"));

    function Container(holder) {
        this.holder = holder;
        this.staging = [];
        this.holding = [];
        this.live = [];
        this.live[0] = holder.children;
    }

    imageHolders.forEach(function (holder) {
        var container = new Container(holder);
        containerHolders.push(container);
    });


    (function fill() {
        for (var i = 0, len = imageArray.length; i < len; i += 1) {
            var img = new Image();
            img.onload = function () {
                var containerIndex = Math.floor(Math.random() * containerHolders.length);
                containerHolders[containerIndex]['holder'].appendChild(this);
                containerHolders[containerIndex].holding.push(this);
            };
            img.src = imageArray[i];
        }
    })();



    function select() {
        var container = containerHolders[Math.floor(Math.random() * containerHolders.length)];
        if(container.holding.length) {
            var newer = container.holding[0];
            var old = container.live.splice(0, 1);
            old = old[0];
            old.className = 'staging';
            newer.className = 'live';
            container.live.push(newer);
            container.holding.push(old);
        } else {
            console.log('none');
        }
    }


    document.onclick = select;

如果非要我猜的话，我会说这个问题在某种程度上与我从数组中的对象中删除类的方式有关，而不是使用其他方法，但我不确定。感谢您的帮助。

Answer 1

如果 JQuery 是一个选项，您应该使用它。我意识到为了一些看似简单的事情转向库可能并不理想，但我发现对于我从事的任何元素，一旦元素变得足够大，我通常最终还是会使用 JQuery。 JQuery 非常适合这种事情。

$(el).addClass('myClass');

$(el).removeClass('myClass);

此外，如果您使用的是 JQuery，则可以使用 CSS 选择器轻松查询它们，而不是使用数组来跟踪您的对象:

$('div.myClass').removeClass('myClass').addClass('myClass2');