Javascript Span单击查找第二个div

我在这篇文章中问了之前的一个问题：

以获取我的量程选择器后的第一个div

我曾经

$(element.parentNode.nextElementSibling).toggle();

为了显示/隐藏第一个div列表类型demandes

现在我需要切换选中demandes的第二个div预览，我尝试：

$(element.parentNode.nextElementSibling.nextElementSibling).toggle();

不要工作。有什么想法吗

下面是我的php/html代码：

foreach ($unassociated as $key => $value){
          //echo '<br/>';

          echo '<label style="color: #1c5081">
                    <span id="open-list" name="open-list" class="open-list" onclick="openList(this)"><b>+</b></span> 
                    <span id="close-list" name="close-list" class="close-list" onclick="closeList(this)" style="display: none"><b>-</b></span> 

                    '.$key.'</label>';

          echo '<div class="list-type-demandes" style="padding-left: 10px ; display: none">';

          foreach ($value as $key1 => $value1) {

              $appel_projet_type_demande = null;
              if($appel_projet->getIdAp()){
                  $appel_projet_type_demande = Doctrine_Core::getTable('AppelProjetTypeDemande')->findOneByIdApAndIdTypeDemande($appel_projet->getIdAp(), $key1);
              }


              if ($appel_projet_type_demande) {
                  $checked = 'checked';
              } else {
                  $checked = '';
              }
              //var_dump($key1 , $this->candidature->getIdAp() , $checked);
              echo '<label style="display: inline"><input type="checkbox" class="checkbox_type_demande" data-appel-projet="' . $appel_projet->getIdAp() . '" name="appel_projet[type_demande_list][' . $i++ . ']" value="' . $key1 . '" id="appel_projet_type_demande_list_' . $key1 . '" ' . $checked . '> ' . $value1 . '</label><br/>';

          }

          echo '</div>';


          //checked items preview
          echo '<div class="preview-checked-demandes" style="padding-left: 10px ; display: block">';
          foreach ($value as $key1 => $value1) {

              $appel_projet_type_demande = null;
              if($appel_projet->getIdAp()){
                  $appel_projet_type_demande = Doctrine_Core::getTable('AppelProjetTypeDemande')->findOneByIdApAndIdTypeDemande($appel_projet->getIdAp(), $key1);
              }


              if ($appel_projet_type_demande) {
                  $checked = 'checked';
              } else {
                  $checked = '';
              }

              if($checked){
                  echo '<label style="display: inline"><input type="checkbox" class="checkbox_type_demande_preview" data-appel-projet="' . $appel_projet->getIdAp() . '" name="appel_projet[type_demande_list][' . $i++ . ']" value="' . $key1 . '" id="appel_projet_type_demande_list_' . $key1 . '" ' . $checked . '> ' . $value1 . '</label><br/>';
              }
          }
          echo '</div>';
      }?>

解决方案-1

解决方案-2

您也可以尝试以下解决方案。我在代码中添加了详细信息

<script>
$( function() {
    $('.action_list').on('click', function(){
       // Hide and show the action_list list item
      $(this).parent().find('.action_list').show();
      $(this).hide();

     //On click of open-list and close-list class, getting the target to be toggled from data attribute
     var target = $(this).data('target');
     $('.'+target).toggle();
    });
  });

  </script>

<?php
$i=1;
foreach ($unassociated as $key => $value){
          //echo '<br/>';


        /******************* Added details ************************************
            1- Add class of div which you have need to toggle with data attribute
            2- Add 'action_list' class in open-list and close-list item
        **************** End details ******************************************/

          echo '<label style="color: #1c5081">
                   <span id="open-list" name="open-list" data-target="target_'.$i.'" class="action_list open-list"><b>+</b></span> 
                   <span id="close-list" name="close-list" data-target="target_'.$i.'" class="action_list close-list"  style="display: none"><b>-</b></span> 

                    '.$key.'</label>';

          echo '<div class="list-type-demandes" style="padding-left: 10px ; display: none">';

          foreach ($value as $key1 => $value1) {

              $appel_projet_type_demande = null;
              if($appel_projet->getIdAp()){
                  $appel_projet_type_demande = Doctrine_Core::getTable('AppelProjetTypeDemande')->findOneByIdApAndIdTypeDemande($appel_projet->getIdAp(), $key1);
              }


              if ($appel_projet_type_demande) {
                  $checked = 'checked';
              } else {
                  $checked = '';
              }
              //var_dump($key1 , $this->candidature->getIdAp() , $checked);
              echo '<label style="display: inline"><input type="checkbox" class="checkbox_type_demande" data-appel-projet="' . $appel_projet->getIdAp() . '" name="appel_projet[type_demande_list][' . $i++ . ']" value="' . $key1 . '" id="appel_projet_type_demande_list_' . $key1 . '" ' . $checked . '> ' . $value1 . '</label><br/>';

          }

          echo '</div>';

           /******************* Added details *****************
             Added - Add class target (target_'.$i.') to toggle on click of open-list and close-list 
          /******************* End details ************ */

          echo '<div class="preview-checked-demandes target_'.$i.'" style="padding-left: 10px ; display: block">';
          foreach ($value as $key1 => $value1) {

              $appel_projet_type_demande = null;
              if($appel_projet->getIdAp()){
                  $appel_projet_type_demande = Doctrine_Core::getTable('AppelProjetTypeDemande')->findOneByIdApAndIdTypeDemande($appel_projet->getIdAp(), $key1);
              }


              if ($appel_projet_type_demande) {
                  $checked = 'checked';
              } else {
                  $checked = '';
              }

              if($checked){
                  echo '<label style="display: inline"><input type="checkbox" class="checkbox_type_demande_preview" data-appel-projet="' . $appel_projet->getIdAp() . '" name="appel_projet[type_demande_list][' . $i++ . ']" value="' . $key1 . '" id="appel_projet_type_demande_list_' . $key1 . '" ' . $checked . '> ' . $value1 . '</label><br/>';
              }
          }
          echo '</div><div style="clear:both"></div>';

          $i++;
      }?>

---

请改为显示呈现的html，因为php与此无关。您的问题主要涉及JavaScript、html，可能还有一点CSS。您可以通过使用第n个类型或类似的东西按顺序调用li。预览选中demandes[1]。切换？

<script>
  $( function() {
    $('.action_list').click(function(){

      // Hide and show the action_list list item
      $(this).parent().find('.action_list').show();
      $(this).hide();

      //you can also use nextAll(). nextAll() returns all the next elements, eq(1) returns the second one amongst them.
        $(this).parent().nextAll().eq(1).toggle();

    });
  } );
</script>

<script>
$( function() {
    $('.action_list').on('click', function(){
       // Hide and show the action_list list item
      $(this).parent().find('.action_list').show();
      $(this).hide();

     //On click of open-list and close-list class, getting the target to be toggled from data attribute
     var target = $(this).data('target');
     $('.'+target).toggle();
    });
  });

  </script>

<?php
$i=1;
foreach ($unassociated as $key => $value){
          //echo '<br/>';


        /******************* Added details ************************************
            1- Add class of div which you have need to toggle with data attribute
            2- Add 'action_list' class in open-list and close-list item
        **************** End details ******************************************/

          echo '<label style="color: #1c5081">
                   <span id="open-list" name="open-list" data-target="target_'.$i.'" class="action_list open-list"><b>+</b></span> 
                   <span id="close-list" name="close-list" data-target="target_'.$i.'" class="action_list close-list"  style="display: none"><b>-</b></span> 

                    '.$key.'</label>';

          echo '<div class="list-type-demandes" style="padding-left: 10px ; display: none">';

          foreach ($value as $key1 => $value1) {

              $appel_projet_type_demande = null;
              if($appel_projet->getIdAp()){
                  $appel_projet_type_demande = Doctrine_Core::getTable('AppelProjetTypeDemande')->findOneByIdApAndIdTypeDemande($appel_projet->getIdAp(), $key1);
              }


              if ($appel_projet_type_demande) {
                  $checked = 'checked';
              } else {
                  $checked = '';
              }
              //var_dump($key1 , $this->candidature->getIdAp() , $checked);
              echo '<label style="display: inline"><input type="checkbox" class="checkbox_type_demande" data-appel-projet="' . $appel_projet->getIdAp() . '" name="appel_projet[type_demande_list][' . $i++ . ']" value="' . $key1 . '" id="appel_projet_type_demande_list_' . $key1 . '" ' . $checked . '> ' . $value1 . '</label><br/>';

          }

          echo '</div>';

           /******************* Added details *****************
             Added - Add class target (target_'.$i.') to toggle on click of open-list and close-list 
          /******************* End details ************ */

          echo '<div class="preview-checked-demandes target_'.$i.'" style="padding-left: 10px ; display: block">';
          foreach ($value as $key1 => $value1) {

              $appel_projet_type_demande = null;
              if($appel_projet->getIdAp()){
                  $appel_projet_type_demande = Doctrine_Core::getTable('AppelProjetTypeDemande')->findOneByIdApAndIdTypeDemande($appel_projet->getIdAp(), $key1);
              }


              if ($appel_projet_type_demande) {
                  $checked = 'checked';
              } else {
                  $checked = '';
              }

              if($checked){
                  echo '<label style="display: inline"><input type="checkbox" class="checkbox_type_demande_preview" data-appel-projet="' . $appel_projet->getIdAp() . '" name="appel_projet[type_demande_list][' . $i++ . ']" value="' . $key1 . '" id="appel_projet_type_demande_list_' . $key1 . '" ' . $checked . '> ' . $value1 . '</label><br/>';
              }
          }
          echo '</div><div style="clear:both"></div>';

          $i++;
      }?>