Changing the hover behavior of dynamically generated classes

Question

My goal is to design an e-commerce storefront with tile design, where the thumbnail of an item is shown, then upon hover, the item name is shows above it. Similar to this, except that it slides up on hover instead of simply appearing.

The main problem is that we're using an e-commerce storefront solution with a prepackaged template for the item display, where all HTML is autogenerated, and all items have a css class with no css ID.

Here's the HTML, with unneeded code edited out

<td class="hoverClass">
    <--Edited out code-->
        <table class="otherClass" cellspacing="0" cellpadding="0" width="100%" style="height: 158px; width: 190px;">
          <edited out>
        </table>
        <table class="appearClass" cellspacing="0" cellpadding="0" width="100%" style="margin-bottom: 0px;">
          <edited out>
        </table>
</td>

My goal is to hover of .hoverClass and .appearClass appears over it. I included .otherClass because in my research it tended to be 2 divs on the same level that could slide toggle, not a parent and child Div My plan was to use Jquery slideToggle so I tried dynamically adding IDs to the classes.

<script>
var x = document.getElementsByClassName("hoverClass");
var y = document.getElementsByClassName("appearClass");
var thumbArray = [];
var footArray = [];
for(var i = 0; i < x.length; i++)
{
    thumbArray.push("catThumb" + i);
    footArray.push("catFoot" + i);
    x[i].id = thumbArray[i];
    y[i].id = footArray[i];
}
for(var j = 0; j < x.length; j++)
{
    $("#" + thumbArray[j]).hover(function(){
        $("#" + footArray[j]).slideToggle();
    });
}
</script>

What occurs is that all the elements have their IDs created, but all those custom hover IDs have their hover bonded to the last appearClass element. In other words, if I have 10 items and I run this code, hovering over items 1 through 10 only causes the slide on item 10.

How can I get the hover IDs to bond with its instance of appear ID?

Answer 1

You can't get footArray[j] value when you hover the item If you want desire output use this

for(var j = 0; j < x.length; j++)
{
    $("#" + thumbArray[j]).hover(function(){
        $("#"+this.id.replace("catThumb","catFoot")).slideToggle();
    });
}

If Those are dynamic class you can use like this

$(document).on("mouseenter mouseleave","[class^=catThumb]",function(){

  $("[class^=catFoot]").eq($(this).index()).slideToggle();

});

Answer 2

A little more jQuery-ish, but I don't think you need to add id's to them (unless you need to for something else, then I'll update my answer).

<script>
var hovers = $(".hoverClass");

$.each(hovers, function() {
    $(this).hover(function(){
        var appear = $(this).find(".appearClass");
        appear.slideToggle();
    });
});
</script>

Answer 3

Don't use dynamic IDs, use the classes instead:

$('.hoverClass').hover(function(){
    $(this).find('.appearClass').slideToggle();
});