Question

所以我有这个jquery函数，它应该在悬停时显示一个类的隐藏范围。如何设置该功能，使其仅显示所选div的子跨度（而不是显示页面上的所有跨度）？

这是我的jquery函数：

$(".thumb").hover(
    function() {
       $(".blurb").show();
    },
    function(){
       $(".blurb").hide();
    }
);

您可以查看jsfidde here。谢谢！

Answer 1

这就是this的用途！

$(".thumb").hover(
    function() {
       $(this).children('.blurb').show();
    },
    function(){
       $(this).children('.blurb').hide();
    }
);

Answer 2

使用$(this).children()而不是再次执行全局查询：

$(".thumb").hover(function() {
    $(this).children().show();
}, function() {
    $(this).children().hide();
});

工作演示：http://jsfiddle.net/h5x3f/2/

注意：如果您对支持Internet Explorer 6不感兴趣，可以完全避免使用jQuery / JavaScript并使用CSS的:hover伪类，这甚至可以在禁用JS的情况下使用。或者您可以使用像ie-7.js这样的垫片来为您处理:hover。有关示例，请参阅this variation of your fiddle。

Answer 3

首先选择div，然后选择其子项，例如

$("#mydiv").children(".blurb").show();

Answer 4

这里有另一个使用'find'功能的解决方案：

    $(".thumb").hover(
        function() {
            $(this).find(".blurb").show();
        }, function() {
            $(this).find(".blurb").hide();
        }

    );

如何使用JQuery只显示div子元素？

4 个答案: