数据在循环内切换

Question

当我点击＆＃34; Ver postulantes＆＃34;我想为每条记录切换一个Div框（.myslide）。 （显示应用程序）按钮。如果我单击第一行按钮并显示幻灯片，我希望在单击第二个或第三个记录按钮时隐藏它。

  while($row = mysql_fetch_array($listaofertasres)){

    echo "<p></p>"; 
    echo "<div class='jumbotron listado'>";

    echo "<p class='list1'> Comuna : ". $row['comuna_nombre']. "</p>";  
    echo "<p class='list1'> Numero de vacantes : ". $row['vacantes_oferta']. "</p>";
    echo "<p class='list1'> Edad minima :" .$row['edad_minima_postulante_oferta']. "</p>";
    echo "<p class='list1'> Edad maxima :" .$row['edad_maxima_postulante_oferta']. "</p>";
    echo "<p class='list1'> Fecha termino: ". date('d-m-Y', strtotime($row['fecha_termino_oferta'])) ."</p>\n";

    ?>
    <!--BUTTON APPLY -->
    <a href="index.php?action=ver_postulantes&id=<?php echo $row['id_oferta'];?>" data-toggle="modal" class="btn btn-default postulantes" role="button">Ver Postulantes(DISPLAY APPLICANTS) (<?php echo $row['cuenta']; ?>)</a>

      //I'd like to display it outside the jumbotron as well
      <div  class='myslide'>  </div>   

      <?php
      $cont++;
      echo "</div>";


     } 

我尝试了这个没有成功

 $(document).ready(function(){

   $(".myslide").hide();
   $(".postulantes").on('click', function(){

            $(this).next().toggle('slow');

   });

});

我希望它在jumbotron下，每个按钮只点击一张幻灯片

Answer 1

检查此jsFiddle demo或运行以下演示...

您应该使用slideToggle jQuery method而不是toggle（）。像这样：

$(document).ready(function(){

   $(".myslide").hide();
   $(".postulantes").on('click', function(){
      
           $(this).next().toggle('slow');

   });

});

html,body{width:100%;height:100%;}

.myslide{
    width:150px;
    height:150px;
    background-color:red;
}

.postulantes{
    width:80px;
    height:20px;
    margin-bottom:20px;
}

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


<button class="postulantes">toggle</button>
<div class="myslide">a</div>

Answer 2

这个确保您当时只打开了一张幻灯片。它会在每次点击时关闭所有幻灯片并重新打开所需的幻灯片。

标记

<div class="jumbotron">
    .. content ..
    <a class="postulantes">...</a>
</div>
<div class="myslide">
  .. content ...
</div>

的Javascript

$(document).ready(function(){
  // hide all slides
  $('.myslide').hide();
  // add listener
  $(".postulantes").on('click', function(){
    // if the clicked slide is not already visible
    if ($(this).parent().next().css('display') == 'none') {
      // hide all slides
      $('.myslide').hide('fast');
      // and show the slide corresponding to the link
      $(this).parent().next().slideToggle('slow');
    }
  });
});

一个更好的解决方案是保存对打开的幻灯片的引用，只在点击时关闭它。