Question

我有点问题。我正在尝试在数据库中执行while循环，该数据库将加载有关每个人的信息。在该字段中，我希望它加载联系表单，但在初始加载时隐藏它。我有这个工作我的问题是当我去点击它显示所有Div的按钮时，我只希望它显示该按钮被点击的div。以下只是一个简单的例子

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

$x = 1; 

while($x <= 5) {
  echo '<div class ="Test_name">Hello World</div> <br>
  <a  href = "#" class = "Click_ME" > Click to show</a>';
  $x++;
} 
?>

<script>
  $( document ).ready(function() {
  $( ".Test_name" ).hide();
  $('.Click_ME').html('TEST');
  $( ".Click_ME" ).click(function() {

    $( ".Test_name" ).show();

  });
});
</script>

Answer 1

jquery选择器应该指向单击按钮时的相应div。

使用$(".Click_ME").index(this)的内部点击事件，我们可以找到点击按钮索引的索引并使用它div可以使用$( ".Test_name" ).eq($(".Click_ME").index(this)).show();显示。

请查看下面的代码段。

$( document ).ready(function() {
  $( ".Test_name" ).hide();
  $( ".Click_ME" ).on('click',function() {
    //$(".Click_ME").index(this) will find the index of clicked button and based on that index div can show/hide.
    $( ".Test_name" ).eq($(".Click_ME").index(this)).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="Test_name">Hello World</div> <br>
<a  href = "#" class = "Click_ME" > Click to show</a>
<br/>
<br/>

<div class ="Test_name">Hello World</div> <br>
<a  href = "#" class = "Click_ME" > Click to show</a>

Answer 2

将$( ".Test_name" ).show();替换为$(this).prevAll('.Test_name').first();

Answer 3

这个简单的步骤。

在div中包含样式display:none

<div style='display:none'>
    // you all php data here
</div>

删除样式

$( ".Click_ME" ).click(function() {

    $(".Test_name").css('display','block');

});

使用href click me按钮显示div的循环，以显示该div中的文本

3 个答案: