For循环中的JQuery事件侦听器

Question

我正在尝试使用Jquery和toggleClass创建一些基本的按钮翻转功能。 我正在通过从HTML克隆DIV并将其复制多次来构建元素列表（它会填充数据库中的数据列表）。 为此，我使用了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的其他方式的建议也将有所帮助。

编辑：我也想从for循环中提到的arraylist中切换多个子级。 我该如何设置？ 我似乎无法在没有错误的情况下将数组传递给jquery命令。

Answer 1

for循环后的以下代码应允许您一次性分配所有mouseover和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");
})

（如果您使用的是1.7之前的jQuery，请使用.bind()而不是.on() 。）

上面说的是找到所有以“ phoneDisplayContainer”开头的id的div，并分配事件处理程序。 在处理程序中，找到第四个子代div并切换类。

您没有显示HTML或CSS，但是您可以根据需要在CSS中完成所有操作。 假设您可以为要捕获其悬停事件的div分配一个公共类（“ parentDiv”），并为其子div（要隐藏的那个）分配一个公共类（“ childDiv”），则可以执行此操作：

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

（显然，您可以给出更有意义的类名称以适合您的结构。）

否则，再次，如果您可以将这些类分配给适当的div，则在循环后可以使用jQuery进行此操作：

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

基本上与我最初说的相同，但是使用类作为选择器。 如果您觉得我正在向您推销基于类的解决方案，那是因为我：这样会使这种事情变得容易得多。