javascript - jquery只显示孩子

Question

我有一个问题：为了简单起见，我在 div 上使用类，我想在单击后显示一个隐藏的 div，但只在那个 div 上，问题是它显示在所有 div 上，我似乎无法得到它工作，这是一个有问题的jsfiddle：http: //jsfiddle.net/cWNvT/

HTML：

<div class="left">
    <a href="#" class="edit-click">Edit</a>
    <div class="edit">
        <p>edit here</p>
    </div>
</div>
<div class="left">
    <a href="#" class="edit-click">Edit</a>
    <div class="edit">
        <p>edit here</p>
    </div>
</div>
<div class="left">
    <a href="#" class="edit-click">Edit</a>
    <div class="edit">
        <p>edit here</p>
    </div>
</div>

JavaScript：

$(document).ready(function() {
    $('.edit').hide();
    $('.left a.edit-click').click(function() {
        $('.left').children().show();
    });
});​

有人对此有解决方案吗？

Answer 1

试试这个工作小提琴。

$(document).ready(function() {
 $('.edit').hide();
 $('.left a.edit-click').click(function(){
    $(this).parent().children().show();
 });
});

我所做的只是使用$(this).parent()而不是使用您的$(".left")选择器。

Answer 2

尝试仅查找单击元素的父元素，并使用其子元素：

http://jsfiddle.net/cWNvT/1/

$(document).ready(function() {
   $('.edit').hide();
   $('.left a.edit-click').click(function(){
       $(this).closest(".left").children().show();
   });
 });
​

$(".left").left选择文档中所有具有类的元素。$(this).closest(".left")找到具有类的单击链接的第一个父级.left。

Answer 3

将您的代码更改为：

$('.left a.edit-click').click(function(){
    $(this).next('.edit').show();
});

http://jsfiddle.net/cWNvT/3/