Question

我正在尝试调用函数onload元素，以便我可以指定我调用函数的每个元素的不同更改。

就像我有很多div，每个div都有相同的数据属性，我调用所有具有相同数据属性的div。当我加载页面并获得那些不同的值时，每个div都有不同的html文本，我想调用它们。就像在jQuery中一样，我们称之为'each'函数。在这里，我提交了我的html和javascript代码...这将绘制一个清晰的图片。

   <-- html -->
   <div data-attribute="one">
        <span class='value'>1000</span>
   </div>
   <div data-attribute="two">
        <span class='value'>420</span>
   </div>
   <div data-attribute="three">
        <span class='value'>2000</span>
   </div>

   <!---- javascript ---->
    var abc = document.querySelectorAll('[data-attribute]'); 
        for (i= 0; i < abc.length; i++) {
            abc[i].onload = function(){  
            // --------- working well with click / mousemove events -----
               console.log('function called!');
            };
        }

我不想使用任何库或者不想在元素上调用该函数。

P.S。如果有其他选择也可以让我知道。谢谢..

Answer 1

您可以等待整个DOM加载，并执行您需要的任何操作。

window.onload = function(){
    var abc = document.querySelectorAll('[data-attribute]');
    for (i= 0; i < abc.length; i++) {
         var elem = abc[0];
         if(elem.getAttribute("data-attribute") == "one"){
             // do something here
         }
    }
}

您可以根据需要为不同的属性/元素扩展这个想法。

Answer 2

就文档对象模型执行就绪和加载。因此，您无法在特定元素上调用它们。在这种情况下，您可以在DOM准备好更改多个元素后使用set-timeout函数。

如何在元素加载时调用函数？

2 个答案: