2

我正在开发一个 javascript 项目，在该项目中我使用文档片段一次附加多个 span 元素。然后他们用css动画。

.redCircle {
    float: left;
    height:20px;
    width:20px;
    border-radius:10px;
    box-shadow: 0 0 20px red;
    background-color: red;
    animation: 2s circleFall linear;
}

@keyframes circleFall {
    0%{margin:0;}
    100%{margin:100% 10%;}
}


setInterval(thingyTime, 5000);

function thingyTime() {
    var count = 15,
        spanVar = document.createElement("span"),
        fragment = document.createDocumentFragment();

    for (var i = 0; i < count; ++i) { 

        for (var j = 0; j < 1; ++j) { 
            spanVar = document.createElement('spanVar');
            spanVar.className = "redCircle";
            fragment.appendChild(spanVar);
        }
    }

    document.body.appendChild(fragment);

};

thingyTime();

我试图弄清楚动画完成后如何删除跨度。我用过

setTimeout(function(){

    spanVar.remove(spanVar.selectedIndex);

},2000); // <= animation length

当它只适用于一个元素时它工作正常，但我需要删除片段中的所有元素。

我感谢你的帮助。

4

2 回答 2

2

一些位（进一步我最初的评论）。为了生成，我会把额外createElement("span")的放在顶部，因为它永远不会被使用。然后在循环中创建 span，而不是spanVar's（假设是不需要的）。对于创建元素方法，你只需给它你想要的元素类型。

function thingyTime() {
    var count = 15,
        spanVar,
        fragment = document.createDocumentFragment();

    for (var i = 0; i < count; ++i) { 
        for (var j = 0; j < 1; ++j) { 
            spanVar = document.createElement('span');
            spanVar.className = "redCircle";
            fragment.appendChild(spanVar);
        }
    }
    document.body.appendChild(fragment);
};

对于清理，最简单的方法就是使用您创建的类。全部查询，然后一一核对。

document.querySelectorAll(".redCircle").forEach(function(c){
    c.parentNode.removeChild(c);
});

另一方面，如果您有其他 redCircle 实例，则您不想使用核武器。我会var circlesToCleanup = [];在创建循环中添加一个 then 将每个 em 推到它上面circlesToCleanup.push(spanVar)

然后，当您调用清理时，迭代circlesToCleanup而不是 querySelector 输出。

于 2016-09-26T14:24:04.127 回答
1

由于您已经指定了一个类：

spanVar.className = "redCircle";

您可以使用它来选择所有这些元素并删除它们：

$('.redCircle').remove();
于 2016-09-26T13:59:33.197 回答