需要帮助jQuery隐藏/显示

Question

我使用jQuery在用户交互时显示和隐藏元素。下面的代码工作正常：

<script type="text/javascript"> 

$(document).ready(function() { 
    $('.c').hide(); 
    $('.b').click(function() { 
    var t = $(this); 
    t.parent().find('.c').show();    
    }); 
}); 
</script> 

<div class="a"> 
    <a href="#" class="b">Show</a> 
    <div class="c">This is hidden text</div> 
</div> 

但是当我把一个div标签内的链接代码不起作用。我无法弄清楚问题所在。所以我期待一些帮助。

<script type="text/javascript"> 

$(document).ready(function() { 
    $('.c').hide(); 
    $('.b').click(function() { 
    var t = $(this); 
    t.parent().find('.c').show();    
    }); 
}); 
</script> 

<div class="a"> 
    <div class="d"><a href="#" class="b">Show</a></div> //if i place it inside div it doesn't work 
    <div class="c">This is hidden text</div> 
</div> 

任何人都可以指出为什么它不工作？

Answer 1

由于包含分区不再是链接的父母，这是行不通的使用.parent()找到它。使用.closest('.a')找到它：

t.closest('.a').find('.c').show(); 

这将努力找到c类在同一个包含的元素，你把什么元素在里面regarldess的元素。

Answer 2

$(this).parent()是div.d，不div.a，所以它不包含div.c，这就是为什么find('.c')不会给你任何元素。

Answer 3

当然，你正在从错误的地方（div class = d）做一个find（），所以你从那里找不到（div class = c）。

为什么你需要这个呢？那岂不是更简单的只是：

$('.c').show()