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

jQuery: Accessing an element from an object with multiple instances of a class

本文关键字：实例 对象 访问 元素 jQuery 具有一 有一个      更新时间：2023-09-26

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

我想我可以把所有按钮都放在一个对象中，对内容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/

提前感谢！

您的问题是show（）是一个jQuery函数。然而，对jQuery对象执行offset[i]操作将返回原始dom元素。您应该使用eq（index）来获取jQuery对象以对其进行操作。

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

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

或

$content.eq(i).show()

两者都应该正确地包装元素，并按照您的期望显示它。(http://jsfiddle.net/pcr0zuuo/1/)

您的逻辑是正确的。您可以针对类.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的集合不是jQuery对象的数组，数组引用的是DOM对象。$content的集合不能用[]引用以运行jQuery函数。因此更改为： 
$content.eq(i).show();

它在你的jsFiddle中起作用。（感谢Taplar的提示）

相关文章：