jquery和wordpress按钮

Question

我正在使用wordpress和学习jquery，我有一些问题。我使用foreach循环从类别中获得post，并添加了一个带有jquery函数的按钮以显示更多信息(切换函数)，但即使单击其他按钮，该函数也始终显示第一个帖子的描述。示例:我点击第三篇文章的按钮，但这是对第一篇文章的描述。

<?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();?>

和我的jQuery函数

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

Answer 1

ID属性是唯一的标识符，读取差异here

如果您的html结构始终与上述相同，那么请使用。

$引用jQuery，不需要生成函数，只需使用类选择器绑定单击事件，并在按钮之后显示下一个div。

​

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

​