数据在循环内切换

Question

当我点击“Ver postulantes”（显示应用程序）按钮时，我想为每个记录切换一个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

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

标记

<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');
    }
  });
});

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

Answer 2

检查这个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>