Question

I am trying to create some basic button rollover functionality using Jquery and toggleClass. I am building a list of elements by cloning a DIV from my HTML and duplicating it multiple times (its populating a list of data from a database). To do this I am using a for loop. Here is the currently working code.

            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);
        }
    }

Is there a way to use Jquery event listeners instead of having to set onmouseover and onmouseout directly on the element?

I tried this:

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

With no luck. It just displays performs the rollover effect on the last element in the list. This is actually my first attempt at using jQuery so any other suggestions to ways I could jQuery inside the code would be helpful too.

EDIT: I’d also like to toggle multiple children from the arraylist mentioned in the for loop. How would I set this up? I can’t seem to pass an array to the jquery command without getting errors.

Answer 1

The following code after your for loop should let you assign all the mouseover and mouseout handlers in one go to apply to all the clones:

$('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");
})

(If you’re using jQuery older than 1.7 use .bind() instead of .on().)

The above says to find all the divs with an id beginning with “phoneDisplayContainer” and assign event handlers. Within the handler, find the fourth descendant div and toggle the class.

You don’t show your HTML or CSS, but you could do this all in your CSS if you like. Assuming you can assign a common class (“parentDiv”) to the divs that you want to trap the hover event on, and a common class (“childDiv”) to their child div (the one to be hidden), you can do this:

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

(Obviously you can give more meaningful class names to fit your structure.)

Otherwise, again if you can assign those classes to the appropriate divs then after your loop you can do this with jQuery:

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

Basically the same as what I said initially, but using classes for selectors. If you feel like I’m pushing a class-based solution on you that’s because I am: it tends to make this sort of thing much easier.