Java脚本它工作不正常

时间:2018-02-17 22:55:35

标签: javascript php jquery

我网站上的脚本无法正常运行。它仅适用于第一篇文章。请帮助理解。谢谢。

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);
    });
});

1 个答案:

答案 0 :(得分:0)

您需要使用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);
    });
});
相关问题