1

I'm trying to show/hide multiple divs with classnames based on proximity to the anchor which triggers the JQuery. I think something is wrong with how I'm referencing the div which I want to show.

I have a Fiddle here: http://jsfiddle.net/lizfulghum/qKMH8/4/ and I'm assuming the issue is with this line: JQuery(this).next(".full").show();

The complete code is as follows:

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();
  });
});

Could anyone enlighten me on this point?

4

2 回答 2

2

你打错jQuery了两次。在调用之前，您还必须在 DOM 树中上一层.next()：

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

小提琴

我在 DOM 就绪范围内使用了别名——DOM 就绪处理程序的第一个参数jQuery接收jQuery对象本身。打字速度更快，更不容易打错。您也可以在 WP 和其他场景中安全地使用此语法。$$.noConflict()

当然，如果您没有其他库获取全局$并且您没有使用将 jQuery 置于noConflict模式的框架，则可以使用$而不是jQuery开箱即用。

于 2013-01-22T21:38:38.817 回答
1

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

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

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

于 2013-01-22T21:39:05.500 回答