Блог

У меня небольшая проблема. Я пытаюсь выполнить цикл 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>
  

Селектор 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>  

следуйте этим простым шагам.

• В div включите стиль display:none

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

• при нажатии удалить стиль

   $( ".Click_ME" ).click(function() {
  
      $(".Test_name").css('display','block');
  
  });
    

заменить $( ".Test_name" ).show(); на $(this).prevAll('.Test_name').first();