Показывать и скрывать при каждом нажатии с помощью jquery

#php #html #jquery #wordpress

#php #HTML #jquery #wordpress

Вопрос:

я должен показывать и скрывать div после щелчка по тексту в промежутке. У меня есть много сгенерированных из цикла, и я хотел бы щелкнуть по каждому #mod и показать мне скрытый div. Но скрытый div отображается, только если я нажимаю на первый #mod. Как я могу сделать все #mod a Я создаю этот код, но он работает только для одного, а не для всех. Где я ошибаюсь?

     <tbody>
        <form action="#" method="post" enctype="multipart/form-data" name="actionpost">
           <?php  
                global $wpdb;
               $articles = $wpdb->get_results( "select * from {$wpdb->prefix}mic_articles");     
               ?><?php
               foreach ($articles as $article){    
                   $url = get_home_url() . "/" . strtolower( str_replace( " ", "-", normalize( $article->titre ) ) );
                   echo "
                           <tr class='alternate' valign='top'> 
            <th class='check-column' scope='row'> <input type='checkbox' name='article[]' value='$article->id'></th>
            <td class='column-columnname'><a href='$url'><strong>$article->titre</strong></a>
                <div class='row-actions'>
               
                 <span id='mod'><a href='#'>Modifier</a> </span> | <span style='color:red' class='supp'>Corbeille</span>
                   
</label>
                </div>
            </td>   
            <td class='column-columnname'></td>
        </tr>";
               }
            ?> 
  
        <?php
        ?>
    </tbody>
</table>
                       <script>   

    $('#mod').click(function() {
      $('#modification').toggle("slide");
    });
</script>

1. Ваш тег <form> должен переместиться оттуда. Уберите это из своего

2. вместо этого используйте класс, они созданы для этого

3. Если вы создаете несколько, <span id='mod'> тогда у вас проблема, потому что id's они должны быть уникальными. Вместо этого используйте класс

4. ПРЕДУПРЕЖДЕНИЕ о наличии нескольких идентичных идентификаторов — дайте им имя класса insted, и где ваша #модификация? который также должен быть классом — и, наконец.. вы можете щелкнуть по ближайшему элементу classname элемента, на который вы фактически нажали. или… вы знаете … измените свои селекторы соответствующим образом.

Ответ №1:

Вам нужен обработчик для прикрепления события. попробуйте добавить готовый

 $( document ).ready(function() {
        $('#mod').click(function() {
            $('#modification').toggle("slide");
        });
    });

Ответ №2:

Идентификатор в теге span, он должен быть уникальным. Вместо этого вы можете использовать класс.

 <span class="mod">...</span>

$( document ).ready(function() {
        $('.mod').click(function() {
            $('#modification').toggle("slide");
        });
    });