Question

我有一个问题：为简单起见我在div上使用类，我想在点击后显示一个隐藏的div，但只在该div上，问题是它显示在所有div上，我似乎无法为了使它工作，这里有一个问题的问题：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

尝试这项工作fiddle。

$(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/

jquery只显示孩子

3 个答案: