Question

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

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

请问有人指点我吗？现在，我在代码中输入的警报返回＆＃34;未完成＆＃34; ...

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>

Answer 2

你的代码几乎就在那里！

您应该可以单独保留ID，只需添加和删除所需的类。

另外，如果您确实想要更改ID，则它是一个文本字段，因此您只需使用$( "#short_desc" ).attr( 'id',"full_desc");而不是$( "#short_desc" ).attr( 'id',$( "#full_desc" ) );

进行更改

最后，在$( '#short_desc' ).attr( 'id' ) === "short_desc"中检查一个针对自身的事情，例如short_desc id对它的id应始终返回true。如果某些内容始终返回true，则可以排除检查。我会假设你想要一个“阅读更多”/“少阅读”的东西。

这是一个有效的版本：

$(document).ready(function () {
    $("#show_more").click(function () {
        console.log("clicked");
        if ($('#short_desc').hasClass("show_desc")) {
            $("#short_desc").removeClass("show_desc");
            $("#short_desc").addClass("hide_desc");
            $("#full_desc").removeClass("hide_desc");
            $("#full_desc").addClass("show_desc");
            $("#show_more").text("Read Less...");
        } else {
            $("#full_desc").removeClass("show_desc");
            $("#full_desc").addClass("hide_desc");
            console.log($('#short_desc').attr('id'));
            $("#short_desc").removeClass("hide_desc");
            $("#short_desc").addClass("show_desc");
            $("#show_more").text("Read More...");
        }
    });
});

和jsfiddle一起玩。

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

2 个答案: