Question

作为电子商务模板的一部分，将列出随机数量的产品，我已遍历每个产品，并在产品网格中为每个产品附加了ID。

$(document).ready(function() {
    $(".product").each(function(i) {
        $(this).attr('id', "product" + (i + 1));
    });
});

我有一个悬停动作，所以当它悬停在元素上时，它会动画。

$('#product').hover(function(){
    $("#product-detail").animate({ "height": '0' + 'px' }, 200);
}, function(){
    $("#product-detail").animate({ "height": '74' + 'px' }, 200);
});

由于此列表中始终存在未知数量的产品，因此我尝试迭代每个ID，并使用上述功能悬停每个ID的动画，但很难找到正确的方法。

感谢任何帮助。

Answer 1

真正的问题

根据您提供的代码，您可能会对元素ID与类的误解。首先，您将元素设置为ID为product1，product2，...，然后您尝试选择该元素，就好像它的ID只是product一样，然后尝试为id为product-detail的单独元素设置动画。

如果您需要处理页面上未知数量的元素，请使用类。没有必要分配所有唯一ID，并且在连接事件处理程序时会更加困难。您可以根据this和类选择器唯一标识元素。

修复您的代码

首先，在您的第二个代码块中，您的选择器只能使用ID为product的元素，您需要将其更改为类选择器（.product）。

现在您的悬停选择器应该开始触发所有product个元素。由于您将使用类选择器，因此每个具有类product的元素都将触发您的代码。由于您只想将悬停效果添加到正在悬停的元素，因此您可以使用this获取对该元素的引用。

说完所有这些之后，我认为你可以在不使用任何javascript的情况下实现相同的目标，CSS已经有了悬停和动画的机制。

循环遍历每个元素ID和动画

1 个答案: