2015-07-18 19 views
7

İki php değişkenim var. Bu iki değeri değiştirmek için daha fazla oku düğmesi oluşturmak istiyorum, biri alıntı, diğeri tam içerik. Php ve jQuery için çok yeni. Bunu anlamaya çalışırken birkaç saat geçirdim :(Birisi size yardımcı olabilirse çok memnun oldum…Php değerlerine sahip bir div içeriği nasıl değiştirilir?

Hedefime ulaşmak için id ve sınıfı değiştirmeyi denedim. Bunun gerçekten aptalca olabileceğine inanıyorum. t akıllı yol biliyorum

Şu anda, kodları koymak Uyarısı "undefinied" döndürür lütfen biri bana biraz yön verebilir

...

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> 

çok teşekkür ederiz!

+0

Alert'ünüz tanımsız ("#short_desc"): Burada

bir çalışma versiyonu. .attr ('id', $ ("#full_desc")); – ssnobody

cevap

5

bu deneyin: 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>

+0

Merhaba, Hızlı yanıtınız için çok teşekkür ederim! Kodunuz harika çalışıyor! Şimdi mükemmel çalışıyor! Gerçekten minnettar oldum! Sen profesyonelsin! :) –

1

Kodunuz neredeyse yoktu!

Büyük olasılıkla kimlikleri yalnız bırakmanız ve sadece gerekli sınıfları eklemeniz ve kaldırmanız gerekir. Eğer gerçekten id değiştirmek istediğiniz eğer

Ayrıca, bu kimliğidir karşı metinsel alan yüzden sadece $("#short_desc").attr('id',$("#full_desc"));

Son olarak, short_desc id gibi kendisine karşı bir şeyin bir çek yerine $("#short_desc").attr('id',"full_desc"); kullanarak değiştirecek var $('#short_desc').attr('id') === "short_desc"'da her zaman doğru olarak döndürülmelidir. Bir şey her zaman doğruysa, kontrolü hariç tutabilirsiniz. Bunun yerine bir "daha fazla oku"/"daha az okumayı" istediğini varsayacağım. onunla oynamak için

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

Ve jsfiddle sen $ `bunu atandığında Kimliği belirsiz olduğu için

+0

Merhaba, Açıklamanız için çok teşekkür ederim. Cevabını gördüğüm zaman, aslında ilk cevabı zaten çözdüm. Bana gerçekten gerekli bilgiyi öğrettiğini takdir ediyorum :) Kimin oy kullanacağını bilmiyorum. İkisi de harika. Zaman ayırdığın için teşekkürler! Sizler rock! –

İlgili konular