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

Question

我正在尝试根据与触发 JQuery 的 anchor 的接近程度来显示/隐藏带有类名的多个 div。我认为我引用要显示的 div 的方式有问题。

我这里有一个 fiddle :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 模式的框架，则可以使用 $ 而不是开箱即用的 jQuery。