使用 jquery 显示和隐藏每次点击

Question

单击跨度中的文本后，我必须显示和隐藏 div。我从循环中生成了许多，我想单击每个#mod 并显示隐藏的 div。但是，只要我单击第一个#mod，就会显示隐藏的 div。我怎样才能使所有的#mod 成为我编写的代码，但它只适用于一个而不适用于所有。我哪里错了？

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

Answer 1

您需要处理程序来附加事件。尝试添加就绪

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

Answer 2

span标签中的ID，必须是唯一的。你可以改用一个类。

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

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