如何在jQuery中使用许多类时选择选择器类型？

Question

我正在尝试制作一个页面，其中包含一些点。

如：

• 点1
• POINT2
• 点3

这些点中的每一个都有一些文字，是隐藏的，直到我们点击一​​点上，它则如下图所示它。

我在jQuery中使用了slidetoggle效果，但我不知道如何指定只是选定的点将单独显示。现在，当我按下其中的任何一个时，它们都会同时打开。

我用这个代码：

$(document).ready(function(){ 
$(".point").click(function(){ 
$(".explanation").slideToggle("fast"); 
}); 
}); 

因此，任何想法？

非常感谢。

Answer 1

你需要找到与该点击点相关联的explanation对象的孩子。您可以使用this来获取点击处理程序中的点击点。你没有告诉你HTML，所以我必须弥补一个例子来告诉你如何：

<div class="point> 
    other HTML here 
    <div class="explanation"> 
     This is the explanation for this point. 
    </div> 
</div> 

$(document).ready(function(){ 
    $(".point").click(function(){ 
     $(this).find(".explanation").slideToggle("fast"); 
    }); 
}); 

如果你想更具体的答案，发表您的HTML，所以我们可以看到explanation对象是如何相关的到HTML中的point对象。这假定解释在点对象内。如果它是兄弟姐妹，它会采用稍微不同的jQuery。

Answer 2

$(document).ready(function(){ 
    $(this).click(function(){ 
     $(this).children(".explanation").slideToggle("fast"); 
    }); 
}); 

Answer 3

尝试

$(document).ready(function(){ 
$(".point").click(function(e){ 
$(e.srcElement).children(".explanation").slideToggle("fast"); 
}); 
}); 

如果.explanation元素不是.point使用$(e.srcElement.parentNode)

Answer 4

它的工作:) 非常感谢你的帮助 这里是万一有人代码需要它：

HTML代码：

<h1 class="point">AAAA</h1> 
    <div class="explanation"> 
    <h3>XXXXX</h3> 
    <p>....</p> 
    </div> 

jQuery代码：

$(document).ready(function(){ 
    $(".point").click(function(){ 
     $(this).next.slideToggle("fast"); 
    }); 
}); 

Css：

div.explanation,h1.point 
    { 
     margin:0px; 
     padding:5px; 
     text-align:center; 
     background:#488AC7; 
     border:solid 1px #F6358A; 
    } 
    div.explanation 
    { 
     height:120px; 
     display:none; 
    }