Java腳本它無法正常工作

Question

我網站上的腳本無法正常運行。 它僅適用於第一篇文章。 幫助請諒解。 謝謝。

Screnshot

獲得我的帖子的代碼

function render($Post) {

   ob_start();
?>          
             <div class="post-1">                        
               <div <?php //post_class(); ?> id="post-<?= $Post->ID; ?>">          
                 <div class="My-title"> 
                 <h3><a href="<?= get_permalink($Post->ID); ?>"><?= $Post->post_title; ?></a> </h3>                              
                 </div>    
                 <div class="post-2">     
                   <span id="read_more">Reed more</span> 
                   <div id='read'>
                    <?= apply_filters('the_content', $Post->post_content); ?> 
                   </div> 
                   <span id='hidden'>Turn</span>   
                 </div>
               </div>
             </div>  
   <?php return ob_get_clean(); 
}

我的JavaScrip

$(document).ready(function(){
    $('#read_more').click(function(){
        $('#read').slideDown(200);
        $(this).hide();
        $('#hidden').show(200);
    });
    $('#hidden').click(function(){
            $('#read').slideUp(200);
            $(this).hide();
            $('#read_more').show(200);
    });
});

Answer 1

您需要使用class名而不是id

請考慮使用以下代碼：

PHP：

function render($Post) {
   ob_start();
?>          
             <div class="post-1">                        
               <div>          
                 <div class="My-title"> 
                 <h3><a href="<?= get_permalink($Post->ID); ?>"><?= $Post->post_title; ?></a> </h3>                              
                 </div>    
                 <div class="post-2">     
                   <span class="read_more">Read more</span> 
                   <div class="read">
                    <?= apply_filters('the_content', $Post->post_content); ?> 
                   </div> 
                   <span class="hidden">Turn</span>   
                 </div>
               </div>
             </div>  
   <?php return ob_get_clean(); 
}

JAVASCRIPT：

$(document).ready(function(){
    $('.read_more').click(function(){
        $(this).parent().find('.read').slideDown(200);
        $(this).hide();
        $(this).parent().find('.hidden').show(200);
    });
    $('.hidden').click(function(){
        $(this).parent().find('.read').slideUp(200);
        $(this).hide();
        $(this).parent().find('.read_more').show(200);
    });
});