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

修改：修改后的答案以适应您发布的标记。

您的代码无效，因为.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本地。实现这一目标的最简单方法可能是将clicked存储在每个.data()的{{1}}中：

.topIcon

原始回答：

设置元素，使图标，工具提示和下拉列表共享一个共同的父级。像这样：

$("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()

Answer 3

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

为什么不用$（this）.children（）为我工作？

3 个答案: