JQuery Слушатели событий в Loop

Question

Я пытаюсь создать некоторые базовые функции опрокидывания кнопок с помощью JQuery и toggleClass. Я создаю список элементов, клонируя DIV из своего HTML и повторяя его несколько раз (заполняя список данных из базы данных). Для этого я использую цикл for. Вот действующий код.

  var displayNode = document.getElementById('phoneDisplayContainer');   
     for(var i=0; i<length; i++) { 
      //Clone the original container display. 
      var clonedDisplay = displayNode.cloneNode(true); 
      clonedDisplay.setAttribute('id', 'phoneDisplayContainer' + i); 
      //Remove hidden class from cloned Element. NOT CROSS BROWSER! 
      clonedDisplay.classList.remove('hidden'); 

      var children = clonedDisplay.getElementsByTagName('div'); 
      //Fill new nodes children containers with data. 
      children[1].innerHTML = contact.phone[i].type; 
      children[2].innerHTML = contact.phone[i].number; 
      children[3].setAttribute('onclick', 'PhoneUtility.edit(' + i + ');'); 
      children[3].setAttribute('id', 'phoneEditDisplay' + i); 
      children[4].setAttribute('onclick', 'PhoneUtility.remove(' + i + ');'); 

      //Hidden elements 
      var hidden = new Array(children[3], children[4]); 

      //Set rollover events. 
      clonedDisplay.setAttribute('onmouseover', '$("#' + children[3].id + '").toggleClass("hidden");'); 
      clonedDisplay.setAttribute('onmouseout', '$("#' + children[3].id + '").toggleClass("hidden");'); 

      //Append the new node to the display container 
      phoneContainer.appendChild(clonedDisplay); 
     } 
    } 

Есть ли способ использовать обработчик событий Jquery вместо того, чтобы установить OnMouseOver и onmouseout непосредственно на элементе?

Я попытался это:

$(clonedDisplay).mouseover(function() { 
    $(children[3]).toggleClass('hidden'); 
}); 

не повезло. Он просто отображает эффект опрокидывания последнего элемента в списке. Это на самом деле моя первая попытка использования jQuery, поэтому любые другие предложения о том, как я мог бы использовать jQuery внутри кода, тоже были бы полезны.

EDIT: Я также хотел бы переключить несколько детей из arraylist, упомянутых в цикле for. Как бы я это сделал? Я не могу передать массив команде jquery без ошибок.

Answer 1

Следующий код после ваш цикл должен позволить вам назначить все и наведении курсора мыши MouseOut обработчики на одном дыхании, чтобы применить ко всем клонам:

$('div[id^="phoneDisplayContainer"]').mouseover(function() { 
    $(this).find("div").eq(3).toggleClass("hidden"); 
}).mouseout(function() { 
    $(this).find("div").eq(3).toggleClass("hidden"); 
}); 

// or, given that both handlers do the same thing: 
$('div[id^="phoneDisplayContainer"]').on("mouseover mouseout", function() { 
    $(this).find("div").eq(3).toggleClass("hidden"); 
}) 

(Если вы используете JQuery старше 1.7 используйте .bind() вместо .on().)

Приведенное выше, чтобы найти все div с идентификатором, начинающимся с «phoneDisplayContainer», и назначить обработчики событий. Внутри обработчика найдите четвертый дочерний div и переключите класс.

Вы не показываете свой HTML или CSS, но можете сделать это в своем CSS, если хотите. Предполагая, что вы можете назначить общий класс («parentDiv») для разделов, для которых вы хотите захватить событие наведения, и общий класс («childDiv») для своего дочернего div (тот, который должен быть скрыт), вы можете сделать это :

.parentDiv .childDiv { visibility: hidden; } 
.parentDiv:hover .childDiv { visibility: visible; } 

(Очевидно, что вы можете дать более значимые имена классов, чтобы соответствовать вашей структуре.)

в противном случае, опять-таки, если вы можете назначить эти классы соответствующих див затем после вашего цикла вы можете сделать это с jQuery:

$(".parentDiv").on("mouseover mouseout", function() { 
    $(this).find(".childDiv").toggleClass('hidden'); 
}); 

В основном то же, что и я сказал, но используя классы для селекторов. Если вы чувствуете, что я нажимаю на вас решение на основе классов, это потому, что я: он имеет тенденцию делать это намного проще.