javascript - 更改动态生成类的悬停行为

Question

我的目标是设计一个采用磁贴设计的电子商务店面，其中显示元素的缩略图，然后在悬停时，元素名称显示在其上方。类似于 this , 除了它在 hover 时向上滑动而不是简单地出现。

主要问题是我们使用的是电子商务店面解决方案，其中包含用于元素显示的预打包模板，其中所有 HTML 都是自动生成的，并且所有元素都有一个没有 css ID 的 css 类。

这是 HTML，删除了不需要的代码

<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>

我的目标是悬停 .hoverClass 并且 .appearClass 出现在它上面。我包括 .otherClass 因为在我的研究中它往往是同一级别上的 2 个 div 可以滑动切换，而不是父和子 Div 我的计划是使用 Jquery slideToggle所以我尝试向类动态添加 ID。

<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>

发生的情况是所有元素都创建了它们的 ID，但是所有这些自定义悬停 ID 都将它们的悬停绑定(bind)到最后一个 appearClass 元素。换句话说，如果我有 10 个元素并运行此代码，将鼠标悬停在元素 1 到 10 上只会导致元素 10 上的幻灯片。

如何让悬停 ID 与其出现 ID 实例绑定(bind)？

Answer 1

当你悬停元素时你不能得到 footArray[j] 值如果你想要输出使用这个

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

如果那些是动态类你可以这样使用

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

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

});