javascript - jQuery:从具有多个类实例的对象访问元素

Question

我正在尝试做一个简单的选项卡导航。

我想我可以将所有按钮放在一个对象中，对内容 div 执行相同的操作，获取单击按钮的索引并使用该索引号访问内容 div 以显示相应的内容。我做错了什么？

HTML:

<div class="row">
    <a class="btn" href="#">One</a>
    <a class="btn" href="#">Two</a>
    <a class="btn" href="#">Three</a>
    <a class="btn" href="#">Four</a>
</div>
<div class="row">
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
    <div class="content">Content 3</div>
    <div class="content">Content 4</div>
</div>

jQuery:

$(document).ready(function(){
    var $btn = $('.btn');
    var $content = $('.content');

    $btn.each(function(){
        $(this).on('click', function(){
            $content.hide();
            var i = $btn.index(this);
            $content[i].show(); //This does not work
        });
    });
});

jsFiddle:http://jsfiddle.net/pcr0zuuo/

提前致谢!

Answer 1

您的问题是 show() 是一个 jQuery 函数。然而，对 jQuery 对象进行 offset [i] 操作将返回原始 dom 元素。您应该使用 eq(index) 来代替 jQuery 对象来进行操作。