javascript - 在 jQuery 中匹配两个单独的第 n 个类型？

Question

我想通过相应的索引号匹配两个不同的 div 类。但是，我不确定如何实现这一目标。目标是通过单击相应的 .press 淡入每个 .info，但我采用的方法似乎效率低下。

我的 JSFiddle 在下面。

https://jsfiddle.net/e0o2nauL/

$(document).on("click", ".press:nth-of-type(1)", function(){
$(".info:nth-of-type(1)").fadeIn();});
$(document).on("click", ".press:nth-of-type(2)", function(){
$(".info:nth-of-type(2)").fadeIn();});
$(document).on("click", ".press:nth-of-type(3)", function(){
$(".info:nth-of-type(3)").fadeIn();});

HTML

<p class="info">Information 1</p>
<p class="info">Information 2</p>
<p class="info">Information 3</p>
<div class="press"></div>
<div class="press"></div>
<div class="press"></div>

每个 .info 对应于 .press，如 jQuery 的 nth-of-type 所示。但是，我不确定如何将索引绑定(bind)到每个 nth-of-type().

Answer 1

您可以简单地使用 index() 函数来完成，

var info = $(".info").hide();
$(document).on("click", ".press", function(){
  info.eq($(this).index("div.press")).fadeIn();
});

DEMO