jquery und wordpress button

Question

ich benutze wordpress und lernen jquery und ich habe ein paar probleme. Ich bekomme Post von der Kategorie mit einer foreach-Schleife, und ich fügte eine Schaltfläche mit einer jquery-Funktion hinzu, um weitere Informationen anzuzeigen (Toggle-Funktion), aber die Funktion zeigt immer die Beschreibung des ersten Posts an, auch wenn ich auf die anderen Schaltflächen klicke. Beispiel: Ich klicke auf den Button des dritten Posts, aber es ist die Beschreibung des ersten Posts, der sich selbst zeigt.

<?php 
          global $post; 
          $args = array('posts_per_page' => -1, 'offset'=> 1, 'category' => 264); 

          $myposts = get_posts($args); 
          foreach ($myposts as $post) : setup_postdata($post); ?> 
            <div class="post-container"> 
              <div class="post-thumbnail"><?php the_post_thumbnail() ?></div> 
              <h3><?php the_title(); ?></h3> 
              <button id="know-more" class="all-button" onClick="Myfunction();">En savoir plus</button> 
              <div class="all-car" id="the-content"><?php the_content(); ?></div> 
            </div> 
          <?php endforeach; 
          wp_reset_postdata();?> 

und meine jQuery-Funktion

(function(){ 
    Myfunction = function(){ 
      ("#the_content").toggle(500); 
    }; 
})(jQuery); 

Answer 1

ID Attribute sind eindeutige Bezeichner here

Wenn Ihre HTML-Struktur immer gleiche wie pro die oben dann verwenden, um die Differenz zu lesen.

Make $ Referenz von jQuery, keine Notwendigkeit, Funktion zu machen, verwenden Sie einfach die Klassenselektor bind das Click-Ereignis und zeigen Sie das nächste div nach der Schaltfläche.

$(document).ready(function() { 
 
    $('.all-button').on('click', function() { 
 
    $(this).next('.all-car').toggle(500); 
 
    }); 
 
});

.all-car { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 

 

 
<button class="all-button">En savoir plus</button> 
 
<div class="all-car">Lorem ipsum 1</div> 
 

 
<button class="all-button">En savoir plus</button> 
 
<div class="all-car">Lorem ipsum 2</div>