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()。）

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

您不会显示HTML或CSS，但如果您愿意，可以在CSS中执行此操作。假设你可以将一个公共类（“parentDiv”）分配给你想要捕获悬停事件的div，并将一个公共类（“childDiv”）分配给它们的子div（要隐藏的那个），你可以这样做：

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

（显然你可以提供更有意义的类名来适应你的结构。）

否则，如果您可以将这些类分配给相应的div，那么在循环之后，您可以使用jQuery执行此操作：

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

基本上和我最初说的一样，但是使用选择器的类。如果你觉得我正在推动一个基于类的解决方案，那是因为我：它往往会让这类事情变得更容易。

For循环中的JQuery事件监听器

1 个答案: