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

Question

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

link 是我的代码。 url : https://codepen.io/choimorae/project/editor/XVyLdV enter code here

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

Answer 1

您循环遍历 class 名称为 .ico_snap_doc_obj 的元素列表。这看起来不错，但是当你分配 $wrap 和 $doc_obj 时，它看起来就像它只是第一个具有 class 名称 .ico-doc-wrap 的元素，你 select （并且在第二种情况应该是第二个元素）。

        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");

尝试通过 select 根据元素的 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.

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

snap.svg element addeventListener load event loop not working

javascript

svg

snap.svg