Jak zmienić zawartość div, która ma wartości php?

Question

Mam dwie zmienne php. Chcę utworzyć przycisk Czytaj więcej, aby przełączyć te dwie wartości, jedną jest fragment, a drugą pełną treść. Jestem bardzo nowy w php i jQuery. Spędziłem kilka godzin próbując to rozgryźć :(Naprawdę doceniam, że ktoś może pomóc ...

Próbowałem zmienić id i klasę, aby osiągnąć mój cel. Wierzę, że to może być naprawdę głupie. t znać inteligentny sposób

Czy ktoś mógłby mi dać jakiś kierunek prosimy teraz, Alert umieścić w kodach zwraca "undefinied" ...

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> 

Dziękuję bardzo!

Answer 1

Spróbuj tego: 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

Kod było prawie tam!

Powinieneś prawdopodobnie zostawić ID w spokoju i po prostu dodać i usunąć wymagane zajęcia.

Ponadto, jeśli naprawdę chciał zmienić identyfikator, to pole tekstowe więc po prostu go zmienić za pomocą $("#short_desc").attr('id',"full_desc"); zamiast $("#short_desc").attr('id',$("#full_desc"));

Wreszcie, sprawdzenie rzeczy wobec siebie jak short_desc id przeciwko to id w $('#short_desc').attr('id') === "short_desc" powinien zawsze zwracać wartość true. Jeśli coś zawsze zwraca wartość true, możesz wykluczyć czek. Założę się, że zamiast tego chciałeś mieć coś "czytaj więcej"/"czytaj mniej".

Oto wersja robocza:

$(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..."); 
     } 
    }); 
}); 

I jsfiddle grać z nim w