javascript - 单击“阅读更多”按钮时每个帖子的 WordPress 模式

Question

当单击“阅读更多”按钮时，我试图在 WordPress 的模式窗口中显示单个帖子内容，但我陷入了这一步。模式正在打开，但它仅显示第一个(最新)帖子内容，而不取决于您单击的帖子。如果我点击任何帖子，我只会获得第一篇帖子的内容。请帮助我，我想完成我的项目。

我的index.php

<!-- The Modal -->
<div id="myModal" role="dialog" class="modal hide fade">

   <!-- Modal content -->
<div class="modal-content">
	<br>
	<div class="modal-header">
		<span class="close">&times;</span>
		<h2><?php the_title(); ?></h2>
	</div>
	<br>
	<div class="modal-body">
		<p><?php if ( have_posts() ) : while ( have_posts() ) : the_post(); the_content(); endwhile; else: ?>
                        <p>Sorry, no posts matched your criteria.</p>
                    <?php endif; ?></p>
                    <p class="posted">Posted at: <br><?php echo get_the_date( 'd-m-Y' ); ?> <?php the_time( 'H:i:s' ); ?></p>
                    <?php comments_template() ?>
		<br><br>
	</div>

</div>
<!-- Modal end -->  
</div>

文件，其中显示最近的帖子并带有“阅读更多”按钮:

<div id="posts">

	<div class="post-div"><?php 
        
        $category = get_queried_object_id();
        
        $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
        
        $args = array( 
                    'posts_per_page' => 3,
                    'cat' => 2,
                    'paged' => $paged,);
        
        $recent_posts = new WP_Query($args);
        while( $recent_posts->have_posts()) :  
        $recent_posts->the_post(); global $post; ?>
        
        <h2><?php the_title(); ?></h2>
		<p><span class="date">Posted at: <br><?php echo get_the_date( 'd-m-Y' ); ?> <?php the_time( 'H:i:s' ); ?></span></p>
        <?php if ( has_post_thumbnail() ) : ?><?php the_post_thumbnail('full') ?><?php endif ?>	
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed arcu in odio pretium facilisis. Aliquam ut libero id justo lobortis faucibus...</p>
        <button class="read-more">Read More</button>
        
        <?php endwhile; ?>
        <?php wp_reset_postdata(); ?>
    </div>
	
</div>

和 JavaScript:

var modal = document.getElementById('myModal');		
		
	for ( i=0; i < 50; i++ ) {

		var btn = document.getElementsByClassName("read-more")[i];
        btn.onclick = function() {
            modal.style.display = "block";
        }
}

感谢您的帮助!

Answer 1

使用一个 addEventListner

var modal = document.getElementById('myModal'); 
var posts = document.getElementById("posts");
posts.addEventListener("click", function(e) {
  var button = e.target;
  if(button.classList.contains("read-more"))
    modal.classList.remove("hide");
});