php 값을 갖는 div 콘텐츠 전환 방법

php 값을 갖는 div 콘텐츠 전환 방법

저는 두 개의 php 변수를 가지고 있습니다.추가 읽기 단추를 만들어 이 두 값을 전환합니다. 하나는 발췌한 값이고 다른 하나는 전체 내용입니다.저는 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>

감사합니다!

사용해 보십시오: 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>

코드가 거의 다 왔어요!

ID는 그대로 두고 필요한 클래스만 추가하거나 제거해야 합니다.

또한, 만약 당신이 정말로 id를 변경하고 싶다면, 그것은 텍스트 필드이기 때문에, 당신은 단지 사용하여 id를 변경할 것입니다.$( "#short_desc" ).attr( 'id',"full_desc");보다는$( "#short_desc" ).attr( 'id',$( "#full_desc" ) );

마지막으로, short_descid와 같은 것을 자신에 대해 확인합니다. ID:$( '#short_desc' ).attr( 'id' ) === "short_desc"항상 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...");
        }
    });
});

그리고 그것을 가지고 놀 수 있는 jsfidle.

언급URL : https://stackoverflow.com/questions/31488673/how-to-switch-a-div-content-that-has-php-values