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

$(this).parent()是div.d，而不是div.a，因此它不包含div.c，这就是find('.c')不会为您提供任何元素的原因。

Answer 2

由于包含div不再是链接的父级，因此使用.parent()来查找它不起作用。使用.closest('.a')查找：

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

这将在同一个包含元素中查找具有类c的元素，并在其中放置哪些元素的regarldess。

Answer 3

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

为什么你还需要呢？只是简单地说：

$('.c').show()

需要帮助jQuery hide / show

3 个答案: