为什么$(this).children()不能为我工作?

Question

编辑***感谢下面的帮助。现在我理解了$(this).children()，我让它工作了…有点。我需要一些帮助来获得100%。

我有一个图标列表，点击后，我将其设置为在相应图标下方打开工具提示和下拉菜单。

所有的图标有相同的类。所有的下拉菜单看起来都是一样的(并且有相同的类)，我在jQuery代码中使用一个类作为工具提示和下拉菜单。

我现在看到，通过使用。children()，它将首先拉直接子节点。它正在使用.hover()来显示工具提示。但是，对于其他效果(扩展工具提示、滑动下拉，您可以在代码中看到)，.click()没有任何作用。我一直添加$(this).children()，所以不确定为什么它在一个地方起作用，而不是另一个地方。任何和所有的帮助是非常感激的。到目前为止，也谢谢你的帮助。

现在是代码…(请原谅我的缩进不是很好，我不确定如果我是唯一一个遇到问题的复制/粘贴东西到这里，但它总是搞砸了。我已经修复了一些，但不是100%)

HTML:

<div class="topIcon">
    <a href="stream.html"><img src="icons/stream16lg.png" /></a>
    <div class="topIconNew"></div>
    <div class="topTip">
        <div class="topTipText">Stream</div>
    </div>
    <div class="topDrop">What's up</div>
</div>

jQuery:

$(document).ready(function() {
var clicked = false;
// tooltip hover
$("div.topIconNew, div.topIcon, div#topSend, div#topTool").hover(
function(){$(this).children("div.topTip").show();},
function(){
    if(!clicked) {
        $(this).children("div.topTip").hide();
        $(this).children('div.topTip').hide();
    }
}
);        
//tooltip widening and dropdown menu
$("div.topIconNew").click(function(){
    //permanent tooltip
    $(this).children("div.topTip").show();  
    $(this).children("div.topTip").animate({width:320,marginLeft:-240},"fast");
    $(this).children("div.topDrop").slideDown(240);
    clicked = true;
});
    $("div.wrapper").click(function(){
    //hide dropdown (hide simultaneously)
    $(this).children("div.topDrop, div.topTip").hide();
});
});     

Answer 1

这是一个猜测

 $('.someClass').click(function(){
    $(this).children(); // to access a dom under the clicked item
    $(this).next();     // to access is direct next dom
 });

所以你只处理被点击的元素

Answer 2

$('.imageClass').click(function() {
    var whatYoureLookingFor = $(this).next('.dropDownTooltipClass');
});

Answer 3

编辑:修改答案以适应您发布的标记。

你的代码不工作，因为.topTip不是.topIconNew的子。你首先需要使用我在下面的原始答案中描述的技术& &;先找到父节点，再找到其子节点。使用$(this).closest(".topIcon")找到父母。如果当前元素匹配选择器，.closest()返回当前元素，或者匹配选择器的第一个祖先。

$("div.topIconNew, div.topIcon, div#topSend, div#topTool").hover(
    function () { $(this).closest(".topIcon").children("div.topTip").show(); },
    function () {
        if(!clicked) {
            $(this).closest(".topIcon").children("div.topTip").hide();
        }
    }
});

你会发现另一个问题。由于变量clicked是共享的，因此一旦单击图标，在悬停所有图标后，所有工具提示将保持可见。您需要将clicked设置为单个图标的本地。最简单的方法可能是为每个.topIcon在.data()中存储clicked:

$("div.topIconNew, div.topIcon, div#topSend, div#topTool").hover(
    function() { $(this).closest(".topIcon").children("div.topTip").show(); },
    function() {
        var icon = $(this).closest(".topIcon");
        if(!icon.data("clicked")) {
            icon.children("div.topTip").hide();
        }
    }
});
$("div.topIconNew").click(function () {
    //permanent tooltip
    var icon = $(this).parent();
    icon.children("div.topTip")
        .show()
        .animate({ width: 320, marginLeft: -240 }, "fast");
    icon.children("div.topDrop").slideDown(240);
    icon.data("clicked", true);
});

---

原始答:

设置元素，使图标、工具提示和下拉菜单共享一个共同的父元素。像这样:

<ul>
    <li>
        <img />
        <div>tooltip</div>
        <div>dropdown</div>
    </li>
</ul>

然后，在图标的.click()处理程序中，找到图标父元素中的工具提示和下拉列表:

$("li > img").click(function () {
    $(this).parent().find("div").show();
});

或者，通过索引执行。在标记中按照与各自的工具提示和下拉菜单相同的顺序设置图标:

<div class="icons">
    <img />
    <img />
    <img />
</div>
<div class="tooltips">
    <div>tooltip</div>
    <div>tooltip</div>
    <div>tooltip</div>
</div>
<div class="dropdowns">
    <div>dropdown</div>
    <div>dropdown</div>
    <div>dropdown</div>
</div>

然后使用.index()和.eq()找到工具提示和下拉菜单:

$(".icons > img").click(function () {
    var idx = $(this).index();
    $(".tooltips > div").eq(idx).show();
    $(".dropdowns > div").eq(idx).show();
});