Question

我为一本说明手册创建一个简单的单页导航网站，似乎无法使我的JQuery搜索正常工作。我想要做的是让用户从屏幕左侧的导航面板中选择一个链接，然后在右侧区域显示相应的div。

这是我用来查找与用户点击的内容相关联的div的脚本：

$(document).ready(function(){
    $('#contentArea  div').hide(); //hide divs on load using parent class as a starting point           
    $('.ac-container ol').click(function() {  //function fires when clicking list item inside of ac-container.
        var divFinder = $('#contentArea > div.value()').eq($(this).index('.ac-container'));  // get the relevant div
        console.log(divFinder);
        divFinder.show();  // show the relevant div
        $('#contentArea div').not(divFinder).hide();  // hide all but the relevant div
    })
});

以下是标记的示例：

        <section class="ac-container">
            <label for="ac-2">II. Browser Setup</label>
            <article class="ac-medium">
            <ol type='A'>
                <li><div id="dsection2_1">General Tab</div></li>
                <li><div id="dsection2_2">Security Tab</div></li>
                <li><div id="dsection2_3">Pop Up Blocker</div></li>
            </ol>
            </article>
        </div>
    </section>

我隐藏/显示div的区域：

<td style="background-color:#eeeeee;height:200px;width:1300px;vertical-align:top;" id="contentArea">
<div style="background-color:red; max-width:100%;" id="section1_1">
    <p>This is an item in DIV 1</p>
    <p>This is another item in DIV 1</p>
</div>
<div style="background-color:blue; max-width:100%;" id="section2_2">
    <p>This is an item in DIV 2</p>
    <p>This is another item in DIV 2</p>
</div>
<div style="background-color:Yellow; max-width:100%;" id="section3_3">
    <p>This is an item in DIV 3</p>
    <p>This is another item in DIV 3</p>
</div>

如果我的部分格式不好，我很抱歉，这是我第一次在这里发帖，我是一个使用代码工具的菜鸟......

无论如何，当我在Jquery中将静态值放入我的索引时，我得到了积极的结果，这意味着如果我输入：

var divFinder = $('#section2_2').eq($(this).index('#dsection2_2'));

...它将隐藏第一个和第三个div，并显示第二个div（正确的行为）。但是，当我按照上面显示的方式进行操作时，它将无法与任何内容匹配，只返回最后一个div。我确定这是一个简单的解决办法，但我今天似乎无法想象这一点。

Answer 1

你在找这样的东西吗？

HTML（我添加了一些类并删除了div元素的li子元素：

<section class="ac-container">
    <div>
        <label for="ac-2">II. Browser Setup</label>
        <article class="ac-medium">
            <ol type='A'>
                <li class="one">General Tab</li>
                <li class="two">Security Tab</li>
                <li class="three">Pop Up Blocker</li>
            </ol>
        </article>
    </div>
</section>
<div id="contentArea">
    <div class="one" style="background-color:red; max-width:100%;" id="section1_1">
        <p>This is an item in DIV 1</p>
        <p>This is another item in DIV 1</p>
    </div>
    <div class="two" style="background-color:blue; max-width:100%;" id="section2_2">
        <p>This is an item in DIV 2</p>
        <p>This is another item in DIV 2</p>
    </div>
    <div class="three" style="background-color:Yellow; max-width:100%;" id="section3_3">
        <p>This is an item in DIV 3</p>
        <p>This is another item in DIV 3</p>
    </div>
</div>

JS / jQuery的：

$(document).ready(function(){
    $('#contentArea  div').hide();           
    $('.ac-container li').click(function() {
        var clicked = $(this);
        var cls = $('li').map(function(){
            return $(this).attr('class');
        });
        for (i = 0; i < cls.length; i++) {
            if (clicked.hasClass(cls[i])) {
                $('#contentArea div.' + cls[i]).toggle();
            }
        }
    });
});

这是一个小提琴：http://jsfiddle.net/9pfgp/2/

Answer 2

我不是100％清楚这个位是如何工作的：

var divFinder = $('#contentArea > div.value()').eq($(this).index('.ac-container'));  // get the relevant div

但是您只是为jquery选择器提供了一个硬编码字符串＆＃39; #contentArea＆gt; div.value（）＆＃39;，这意味着它将在id contentArea的元素中查找类型<div.value()>的元素。它没有评估div.value（）调用，因为它在引号内，div.value（）也不做任何我能理解的事情，即使它正在被评估。我一直在盯着你的代码并试图找出这条线与索引的确切关系，我老实说它不能正确地做出正面或反面......但从广义上讲，你的问题是您传递的信息不正确。

如何在另一个表中显示带控制器的单个div？

2 个答案: