jQuery基于.index（）的隐藏/显示部分

debugcn 发表于 Dev

史密斯先生

我有3个标题，当单击它们时会有它们自己的描述。我只希望显示与标题匹配的描述。

$('.descriptions p').hide();

$('.titles h3').click(function() {
  var a = $(this).index();
  
  ('.descriptions p').index(a).fadeIn();
})

.titles h3 {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="titles">
  <h3>Title One</h3>
  <h3>Title Two</h3>
  <h3>Title Three</h3>
</div>

<div class="descriptions">
  <p>Description One</p>
  <p>Description Two</p>
  <p>Description Three</p>
</div>

亚历山大大帝

你有一些小错误。

.index（）与.eq（）

.eq（）函数返回由jQuery选择器返回的数组中指定位置的对象。

.index（）函数采用jQuery选择器作为参数。此功能在已经是jquery / DOM元素的东西上运行。基于传递给.index（）的选择器，jQuery将确定在其上运行的DOM元素的索引是什么。

这是更正的代码。

$(document).ready(function () {
    $('.descriptions p').hide();

    $('.titles h3').click(function () {
        var a = $(this).index();

        $('.descriptions p').eq(a).fadeIn();
    })
});

.titles h3 {
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="titles">
     <h3>Title One</h3>
     <h3>Title Two</h3>
     <h3>Title Three</h3>

</div>
<div class="descriptions">
    <p>Description One</p>
    <p>Description Two</p>
    <p>Description Three</p>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。