Question

我正在尝试使用基于触发JQuery的锚点的接近度来显示/隐藏多个div的类名。我认为如何引用我想要展示的div是错误的。

我在这里有一个小提琴：http://jsfiddle.net/lizfulghum/qKMH8/4/而我假设问题在于这一行：JQuery(this).next(".full").show();

完整的代码如下：

HTML

<div class="teaser">
    Blah blah blah
    <a href="#" class="toggle">Toggle</a>
</div>

<div class="full">
    Full Text Goes Here
</div>

<div class="teaser">
    Blah blah blah
    <a href="#" class="toggle">Toggle</a>
</div>

<div class="full">
    Full Text 2 Goes Here
</div>

Javascript

jQuery(document).ready(function() {
    jQuery(".full").hide();
    jQuery(".toggle").click(function() {
        JQuery(".full").hide();
        JQuery(this).next(".full").show();
  });
});

有人可以在这一点上启发我吗？

Answer 1

您错误输入了jQuery两次。此外，在调用.next()之前，您必须在DOM树中升级一级：

//                             \/ aliases jQuery back to $
jQuery(document).ready(function($) {
    $(".full").hide();
    $(".toggle").click(function() {
        $(".full").hide();
        $(this).parent().next(".full").show();
    });
});

Fiddle

我在DOM就绪范围内将jQuery别名为$ - DOM Ready handler的第一个参数接收jQuery对象本身。 $输入速度更快，输入错误的可能性更小。您也可以在WP和其他.noConflict()场景中安全地使用此语法。

当然，如果您没有其他库访问全局$并且您没有使用将jQuery置于noConflict模式的框架，则可以使用$代替{ {1}}开箱即用。

Answer 2

我添加了parent()。所以遍历会起作用：

$(document).ready(function() {
    $(".full").hide();
    $(".toggle").click(function() {
        $(".full").hide();
        $(this).parent().next(".full").show();
  });
});

http://jsfiddle.net/qKMH8/5/

JQuery切换具有相同类名的多个div的可见性

2 个答案: