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

Question

我的目标是设计一个 e-commerce 带有磁贴设计的店面，其中显示项目的缩略图，然后悬停时，项目名称显示在其上方。类似于this，只是它在hover上向上滑动，而不是简单地出现。

主要问题是我们使用的是 e-commerce 店面解决方案，带有用于项目显示的预打包模板，其中所有 HTML 都是自动生成的，并且所有项目都有 css class 没有 css ID。

这是 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 可以滑动切换，而不是 parent 和 child Div 我的计划是使用 Jquery slideToggle 所以我尝试动态添加 ID 到 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>

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

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

Answer 1

悬停项目时无法获得 footArray[j] 值如果您想要输出，请使用此

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

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

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

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

});

Answer 2

有点 jQuery-ish，但我认为您不需要向它们添加 ID（除非您需要其他东西，然后我会更新我的答案）。

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

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

Answer 3

不要使用动态 ID，请改用类：

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

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

Changing the hover behavior of dynamically generated classes

html

javascript

css

jquery

hover

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

Changing the hover behavior of dynamically generated classes

html

javascript

css

jquery

hover

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