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对象执行偏移量[i]会返回原始dom元素。 您应该改用eq（index）使jQuery对象恢复运行。

Answer 2

本质上，问题是您尝试在普通DOM节点上使用jQuery函数。 您可以通过两种方式修复它：

$( $content[i] ).show()

要么

$content.eq(i).show()

两者都应正确包装元素并按预期显示它。 （ http://jsfiddle.net/pcr0zuuo/1/ ）

Answer 3

jQuery的集合不是jQuery对象的数组，数组引用是针对DOM对象的。 $ content的集合不能用[]引用来运行jQuery函数。 因此更改为：

$content.eq(i).show();

它可以在您的jsFiddle中使用。 （感谢Taplar的提示）

Answer 4

你的逻辑是正确的。 您可以定位.btn类的索引并显示相应的div。

如果要使用jquery，请使用index()函数来查找索引，并使用eq来定位该索引。

$('.btn').click(function()
{
    $('.content').eq($(this).index()).show();
});

http://jsfiddle.net/eqntjb01/

或者，您可以通过javascript（在示例中尝试的方式）实现它

$('.btn').click(function()
{
  $('.content')[$(this).index()].style.display = "block";
});

http://jsfiddle.net/eqntjb01/1/