javascript - 单个功能的多个元素

Question

我有多个产品图像，它们共享相同的“基”类（.billede_wrapper1, .billede_wrapper2）和一个 JQuery 函数。

我如何.retslet5只显示，什么时候.billede_wrapper.5有鼠标悬停？

这是代码的当前状态，以及示例： jsfiddle

在示例中，两个产品都具有相同的类 ( .billede_wrapper, .retslet)，它们在真实页面上将是 ( .billede_wrapper1, . retslet1, .billede_wrapper2, .retslet2) 等等。

代表产品数据库 ID 的数字。

Answer 1

通过使用找到子 .retslet$(this).find('.retslet')

$(document).ready(function(){
    $('.retslet').hide();

    $('.billede_wrap').mouseenter(function(){
        $(this).find('.retslet').slideDown("fast");
    });

    $('.billede_wrap').mouseleave(function(){
        $(this).find('.retslet').slideUp("fast");
    });
});

Answer 2

您可以使用hover：

$(document).ready(function(){
    $('.retslet').hide();

    $('.billede_wrap').hover(function(){
        $(this).find('.retslet').slideDown("fast");
    }, function() {
        $(this).find('.retslet').slideUp("fast");
    });

});

Answer 3

你应该寻找 div 像这样在元素的子元素中向上滑动

$('.billede_wrap').mouseenter(function(){
    $(this).children('.retslet').slideDown("fast");
});

http://jsfiddle.net/6C6Mu/28/