jQuery/PHP:显示/隐藏动态id


jQuery/PHP : Show/Hide with dynamic id

我想使用PHP显示/隐藏动态id,在这里我可以选择并显示正确的div id,但是当我点击显示div中的edit-course时,显示div应该关闭并显示一个新的div,但是我无法打开edit-coursediv,这是我的代码

<?php
 require 'init.php';    
?>
<html>    
  <head>  
    <script src="js/jqueryv1.10.2.js"></script>   
    <script>
      $ (function() 
      {
        $ ('#selector').change(function()
        {
          $ ('.colors').hide();
          $ ('#' + $(this).val()).fadeIn('slow');
        });  
      });
      $(function() {               
        $('.show-hide-action').click(function() 
        {   // bind action
          $ ('.colors').hide();
          $ ('#enclosure' + $(this).val()).fadeIn('slow');
      });
      });
    </script>
  </head>
  <body>   
    <?php            
            echo '<div style="color:#8ac007;margin:30px;text-align:center;">
                   Select the course : <select id="selector">';
                   $sel_course = $db->query('SELECT * FROM courses');
                   $sel_course->execute();
                   echo '<option selected="selected">Select a course</option>';
                   while ($row = $sel_course->fetch(PDO::FETCH_ASSOC)) 
                   {
                      $course_name = $row['course_name'];
                      $id = $row['id']; 
                      echo '<option value='.$id.'>'.$course_name.'</option>';         
                   }
                   echo '</select>';
            echo '</div>';         
            //Displaying the content
            $dis_course = $db->query('SELECT * FROM courses');
            $dis_course->execute();
            while ($row = $dis_course->fetch(PDO::FETCH_ASSOC)) 
            {
               $course_name = $row['course_name'];
               $course_id = $row['id'];
               echo '<div id='.$course_id.' style="display:none;" class="colors">';           
                    echo ''.$course_name.'(<a class="show-hide-action" style="cursor:pointer;">Edit course </a>)';                 
               echo '</div>';
               echo '<div id="enclosure('.$course_id.')" style="display:none;">'. $course_name.' </div>';
            }
    ?>      
  </body>
</html>

创建一个换行div

echo "<div class='wrapper'>";
           echo '<div id='.$course_id.' style="display:none;" class="colors">';           
                echo ''.$course_name.'(<a class="show-hide-action" style="cursor:pointer;">Edit course </a>)';                 
           echo '</div>';
           echo '<div class="enclosure" style="display:none;">'. $course_name.' </div>';
echo "</div>";

然后像这样修改你的脚本:

  $(function() {               
    $('.show-hide-action').click(function() 
    {   // bind action
      $ ('.enclosure').hide();
      $ (this).closest('.wrapper').find('.enclosure').fadeIn('slow');
  });
  });