Question

我想在父母徘徊时显示/隐藏子类。我在Jquery $(this) Child Selector中有多个类集。

由于某些未知原因，它无法正常工作。

我拥有的是

<div class="parentitem">
    <div class="childitem">
    </div>
</div>

另外

$("div.childitem").css({visibility: "hidden"});

$("div.parentitem").mouseenter(function(){
    $("div.childitem").css({visibility: "visible"});
});

$("div.parentitem").mouseleave(function(){
    $("div.childitem").css({visibility: "hidden"});
});

这有效但所有孩子都受到影响。我想要的只是影响特定的div及其孩子

我尝试使用

$(this).children("div.childitem").css({visibility: "visible"});

$(this).parent().children("div.childitem").css({visibility: "visible"});

$(this).next("div.childitem").css({visibility: "visible"});

这些都不是出于某种原因。

有人能指出我哪里出错了。

由于

迪帕克

Answer 1

尝试：

$("div.childitem").css({visibility: "hidden"});

$("div.parentitem").mouseenter(function(){
    $(this).find('.childitem').css({visibility: 'visible'});
});

$("div.parentitem").mouseleave(function(){
    $(this).find('.childitem').css({visibility: 'hidden'});
});

JS Fiddle demo

Answer 2

尝试使用$(this).find("div.childitem")代替$(this).children("div.childitem")。

children()仅查找直接个孩子，而find()在所有孩子中搜索，即孩子的孩子及其子女等等。

如果仍然不起作用，我建议分析调用所有相关事件处理程序的顺序。可能是mouseenter事件处理程序的结果会立即被其他事件处理程序撤消。

在Chrome中或Firefox中的Firebug中，您可以登录控制台。例如。对于Chrome，它是console.log(text_or_object)。

Answer 3

我认为这就是你需要的：

$("div.parentitem").mouseenter(function(){
    $(this).find("div.childitem").css({visibility: "visible"});
});

Answer 4

您需要使用$（this）作为选择器 context 即

$("div.childitem",$(this))

虽然可能有更优雅的解决方案......

Answer 5

这可能很有趣： http://jsfiddle.net/DrkwB/2/

我刚刚修改了一个现有示例以适应多个内容区域，然后是悬停在其上的特定父级，其子元素将被隐藏或相应显示。

Jquery $（this）子选择器因某些未知原因而无法正常工作

5 个答案: