Блог

Главная - Вопросы по программированию - jQuery / PHP: показывать / скрывать с динамическим идентификатором

jQuery / PHP: показывать / скрывать с динамическим идентификатором

#php #jquery

#php #jquery

Вопрос:

Я хочу показать / скрыть с помощью динамического идентификатора с помощью PHP, где я смог выбрать и отобразить правильный идентификатор div, но когда я нажимаю на edit-course из отображаемого div, отображаемый div должен закрыться и показать новый div, но я не смог открыть div edit-course,вот мой код

 <?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. Возможно, потому, что вы привязываетесь $ ('#enclosure' $(this).val()) , когда устанавливаете id="enclosure('.$course_id.')" нужное значение? $ ('#enclosure(' $(this).val() ')')

2. Спасибо, Даррен, да, что-то в этом роде, но нужно передать courseid там

Ответ №1:

Создайте обтекающий 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');
  });
  });

Комментарии:

1. Спасибо за предложение, но могу ли я узнать, где вы использовали enclosure div

2. Когда я нажимаю редактировать курс, div должен отображаться с определенным идентификатором div

3. Есть ли какой-либо другой способ сделать

4. Изменил мой ответ. Когда вы нажмете на редактировать, он найдет ближайшую оболочку, а затем покажет в ней вложение.

5. Работает отлично.. Спасибо