Question

我有一系列divs，其中div是另一个imgs，附加了几个div。我试图旋转这些图像，（应用css过渡），为此我创建了一个Javascript对象，跟踪showing和细分，以及图像。我通过它们旋转的方式是为对象创建三个数组。一个staging holding和showing数组。当显示图像时，它会放在staged数组中，先前显示的图像放在holding array数组中，然后放在showing中。将图像添加到对象的queryselector数组时，我还在其上设置了类（这是转换的完成方式）。出于某种原因，我可以轻松地添加课程，但我无法删除课程，这意味着我的动画最终会停止。我正在将类添加到我的数组中的对象，而不是使用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;但它应该可以工作，至少我认为。

使用devTools我可以看到正在添加但未删除的类。这真让我烦恼。

这是我的 Javascript：

{{1}}

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

Answer 1

如果JQuery是一个选项，你应该使用它。我意识到转向一个看似简单的东西的库可能并不理想，但我发现对于我曾经做过的任何项目，一旦项目变得足够大，我通常最终都会使用JQuery。 JQuery非常适合这种事情。

$（EL）.addClass（ 'MyClass的'）;

$（EL）.removeClass（'MyClass的）;

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

$（ 'div.myClass'）removeClass（ 'MyClass的'）addClass（ 'myClass2'）;

Answer 2

select()功能

出现问题

function select() {
    var container = containerHolders[Math.floor(Math.random() * containerHolders.length)];
    if(container.holding.length) {
        var newer = container.holding[0];//here
        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');
    }
}

每次都会得到相同的图像。

为什么我不能删除此对象的类/属性

2 个答案: