2015-09-17 2 views
0

Я пытаюсь вызвать функцию onload элементов, чтобы я мог указать разные изменения каждого элемента, который я вызываю.как вызвать функцию при загрузке элемента?

как у меня есть много divs, и каждый div имеет одинаковые атрибуты данных, я вызываю все div с одинаковым атрибутом данных. Каждый div имеет другой html-текст, который я хочу назвать, когда я загружаю страницу и получаю эти разные значения. Как и в jQuery, мы называем функцию «каждый». Здесь я отправляю свой код 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. также дайте мне знать, если есть другой вариант сделать то же самое. Спасибо ..

+0

Ваши элементы статичны, поэтому они должны загружаться, прежде чем вы сможете выполнить свой javascript, иначе javascript не сможет найти элемент для проверки состояния загрузки ... Для этого я думаю, что вам нужно будет создать элементы после того, загрузите, тогда вы сможете использовать 'onload' или прослушиватель событий' load' в зависимости от того, какие элементы вы загружаете. Мне трудно понять ваш вопрос, так что это лучшее, что я могу предложить в этот момент времени. – NewToJS

+0

Как подсказки @NewToJS, у вас есть проблема с курицей и яйцом. Вы не можете назначить обработчик события, пока элемент не загрузится. Что вы на самом деле пытаетесь достичь внутри этого обработчика onload? Возможно, вы можете выполнить действие при загрузке * всей страницы * и изменить поведение в зависимости от какого-либо другого атрибута элементов. – Jamiec

+0

@Jamiec Да, я хочу выполнить действие, когда загрузилась вся страница, и изменить поведение в зависимости от какого-либо другого атрибута элементов. –

ответ

0

Вы можете дождаться загрузки всей 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 
     } 
    } 
} 

Вы можете расширить эту идею для создания множества различных атрибутов/элементов, которые вам нужны.

0

Готовность и нагрузка выполняются по объектной модели документа. Таким образом, вы не можете называть их определенным элементом. В этом случае вы можете использовать функцию set-timeout после того, как DOM будет готов к изменению на нескольких элементах.

Смежные вопросы