Question

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

我的JSFiddle在下面。

$(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所示。但是，我不确定如何将索引绑定到每个nth-of-type().

Answer 1

您只需使用index()功能

即可

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

DEMO

Answer 2

您可以在此处使用index和eq，但一般情况下我建议您改进标记。我知道，这个解决方案可能不适用，但通常会有所帮助，退后一步并重新考虑您当前的方法，并且通常会提出一个更优雅的解决方案。

例如，您可以创建如下的标记，甚至可以使用语义标记：

<details>
    <summary></summary>
    <p>Information 1</p>
</details>

这样你甚至不需要使用类。现在为此编写一个jquery选择器会容易得多，不是吗？

如果这种方法不适合你，我会采用明确的耦合，这不会让你依赖于标记中的显式顺序。

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


$(document).on("click", "div", function(){
    $("p[data-info="+$(this).data("press")+"]").fadeToggle();
});

在jQuery中匹配两个单独的nth-of-type？

2 个答案:

DEMO