snap.svg 元素 addeventListener 加载事件循环不起作用

Question

我正在为日常使用创建一个动画图标。通过 id 选择一个元素可以正常工作，但在一个代码中使用多个元素不起作用。如何使多个元素起作用？

链接是我的代码。 网址：https://codepen.io/choimorae/project/editor/XVyLdVenter code here

--> 第一个文档图标可以动画很好，但是第二个文档图标不能动画。

Answer 1

您遍历类名为.ico_snap_doc_obj 的元素列表。这看起来不错，但是当您分配 $wrap 和 $doc_obj 时，它看起来就像是您选择的类名为 .ico-doc-wrap 的第一个元素（在第二种情况下，它应该是第二个元素）。

        let $doc_obj = document.querySelectorAll(".ico_snap_doc_obj");
        let doc_obj_length = $doc_obj.length;
        for(var i=0; i<doc_obj_length; i++){
            $doc_obj[i].addEventListener("load", function(){
                let $wrap = Snap.select(".ico-doc-wrap");
                $doc_obj = Snap.select(".ico_snap_doc_obj");

尝试通过根据元素的 id（如 id="ico_snap_doc_wrap"）选择元素来解决此问题，然后给元素一个唯一的 id（如 id="ico_snap_doc_wrap_2"）。

        let $doc_obj = document.querySelectorAll(".ico_snap_doc_obj");
        let doc_obj_length = $doc_obj.length;
        for(var i=0; i<doc_obj_length; i++){
            $doc_obj[i].addEventListener("load", function(){
                let $wrap = Snap.select("#ico-doc-wrap_" + i);
                $doc_obj = Snap.select("#ico_snap_doc_obj_" + i);

所以，这里有两个元素，一个 ID 为 ico-doc-wrap_0，一个 ID 为 ico-doc-wrap_1。