Question

我有这样的结构

<div>
  <p></p> 1
  <p></p> 2
  <p></p> 3
  <p></p> 4
  <p></p> 5
   .   .  
   .   .  
   .   .  
</div>

<div></div> 1
<div></div> 2
<div></div> 3
<div></div> 4
<div></div> 5
 ..    ..   
 ..    ..   
 ..    ..

p标签和div标签的数量完全相等（不要考虑包含p本身的div）

最初，所有<div></div>都被隐藏（除包含<p></p>标记的div之外）

问题： 1）我希望单击第n个p标签时要显示第n个div。

Answer 1

您可以考虑元素内的文本。您可以匹配单击的 p 元素的 index ，基于该元素可以显示特定的 div 元素：

$('p').click(function(){
  var index = $(this).index();
  $('div').not('.pContainer').eq(index).show();
})

div{display: none;}
.pContainer{display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pContainer">
  <p>1</p> 
  <p>2</p> 
  <p>3</p> 
  <p>4</p> 
  <p>5</p> 
</div>
*********
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 
<div>5</div>

Answer 2

尝试一下，让我知道它是否有效

function paraClick(index) {
  $('.p_click').css('display','none')
  $('.p_click').eq(index).css('display','block')
}

.p_click{display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p onclick="paraClick(0)">P 1</p> 
  <p onclick="paraClick(1)">P 2</p> 
  <p onclick="paraClick(2)">P 3</p> 
  <p onclick="paraClick(3)">P 4</p> 
  <p onclick="paraClick(4)">P 5</p>
</div>

<div class="p_click">D 1</div> 
<div class="p_click">D 2</div> 
<div class="p_click">D 3</div> 
<div class="p_click">D 4</div> 
<div class="p_click">D 5</div>

使用jQuery单击第n个p标签时如何显示第n个div

2 个答案: