jQuery / PHP:使用动态ID显​​示/隐藏

时间:2014-06-20 07:21:36

标签: php jquery

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

<?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>

1 个答案:

答案 0 :(得分:0)

创建包装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');
  });
  });