jQuery基于.index（）

Question

我有3个标题，点击后他们有自己的描述。我只想要显示与标题匹配的描述。

＆＃13;

＆＃13;

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

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

＆＃13;

.titles h3 {
  cursor: pointer;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你有一些小错误。

.index（）vs .eq（）

  

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

  

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

Here是更正后的代码。

＆＃13;

＆＃13;

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

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

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

＆＃13;

.titles h3 {
    cursor: pointer;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;