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，因为在我的研究中，它往往是同一级别的两个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都将其悬停绑定到最后一个appearClass元素。换句话说，如果我有10个项目并运行此代码，则将鼠标悬停在项目1到10上只会导致项目10上的幻灯片。

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

Answer 1

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

LogManager.GetLogger(typeof(Program)).Info("Hello World");

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

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

Answer 2

不要使用动态ID，而是使用这些类：

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

Answer 3

更多jQuery-ish，但我认为你不需要为他们添加id（除非你需要其他东西，然后我会更新我的答案）。< / p>

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

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

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

3 个答案: