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对象恢复运行。

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/

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

4 个答案: