如何切换具有php值的div内容

Question

我有两个php变量.我想创建一个read more按钮来切换这两个值,一个是摘录,另一个是完整内容.我是php和jQuery的新手.花了几个小时试图搞清楚:(如果有人可以提供帮助,我真的很感激...

我试图改变id和class来实现我的目标.我相信这可能真的很愚蠢.但我真的不知道聪明的方式.

请问有人给我一些方向吗？现在,我在代码中输入的警报返回"未完成"...

PHP:

$trimmed = '<p id="short_desc" class="show_desc">' . chinese_excerpt( get_the_content(), $lenth  = 260 ) . '</p>';
            $full    = '<p id="full_desc" class="hide_desc">' . get_the_content() . '</p>';

            echo apply_filters( 'the_resume_description', $trimmed );
            echo apply_filters( 'the_resume_description', $full );

            echo '<div style="float:right; margin-top:-30px"><div id="show_more">Read More...</div></div>'

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $( document ).ready( function () {

            $( "#show_more" ).click( function ( ) {
                if ( $( '#short_desc' ).attr( 'id' ) === "short_desc" ) {
                        $( "#short_desc" ).removeClass("show_desc");
                            $( "#short_desc" ).addClass("hide_desc");
                            $( "#short_desc" ).attr( 'id',$( "#full_desc" ) );  
                            $( "#full_desc" ).removeClass("hide_desc");
                            $( "#full_desc" ).addClass("show_desc");
                    } else if ( $( '#full_desc' ).attr( 'id' ) === "full_desc" ){                               
                            $( "#full_desc" ).removeClass("show_desc");
                            $( "#full_desc" ).addClass("hide_desc");
                            $( "#full_desc" ).attr( 'id',"#short_desc" );
                            alert($( '#short_desc' ).attr( 'id' ));
                            $( "#short_desc" ).removeClass("hide_desc");
                            $( "#short_desc" ).addClass("show_desc");
                                };
                    } );
} );
                                    </script>

非常感谢你!

Answer 1

试试这个:LINK

$( ".show_hide" ).click(function() {   
    if ($('.hide_desc').css('display') == 'none') {
        $(".hide_desc").show();
    $(".show_desc").hide();
    $(this).html('Read More');
    }else{
         $(".hide_desc").hide();
    $(".show_desc").show();
    $(this).html('Read Less');
    }
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p class="show_desc" style="display:none">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet nisl vitae porttitor elementum. Aliquam lobortis, augue in molestie convallis, metus nibh euismod sapien, vitae egestas nisl nunc eu diam. Ut elit elit, fringilla eu ultricies vel, pulvinar a metus. Sed quis urna feugiat, lacinia metus eget, sodales dui. Suspendisse potenti. Duis in turpis quis tellus vulputate ornare. Fusce adipiscing tellus diam, ut pellentesque tortor rhoncus sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet nisl vitae porttitor elementum. Aliquam lobortis, augue in molestie convallis, metus nibh euismod sapien, vitae egestas nisl nunc eu diam. Ut elit elit, fringilla eu ultricies vel, pulvinar a metus. Sed quis urna feugiat, lacinia metus eget, sodales dui. Suspendisse potenti. Duis in turpis quis tellus vulputate ornare. Fusce adipiscing tellus diam, ut pellentesque tortor rhoncus sit amet.</p>
        <p class="hide_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet nisl vitae porttitor elementum. Aliquam lobortis, augue in molestie convallis, metus nibh euismod sapien, vitae egestas nisl nunc eu diam. Ut elit elit, fringilla eu ultricies vel, pulvinar a metus. Sed quis urna feugiat, lacinia metus eget, sodales dui. Suspendisse potenti. Duis in turpis quis tellus vulputate ornare. Fusce adipiscing tellus diam, ut pellentesque tortor rhoncus sit amet.</p>
       
    <div style="float:right;"><div class="show_hide">Read More...</div></div>