2016-04-08 20 views
0

Burada her div metnini görüntülemeye çalışıyorum.Ama div metni büyükse 190 kelime kelimeleri kesmek ve read more bağlantı ile sadece 190 kelime göster. Bağlantı read more bağlantıyı tıklattığınızda eski tam metinde sorun yaşıyorum. ilgili eski tam metni saklamak ve açılır pencerede yeniden göstermek için. i açılır kutuda eski tam metin ve ekranı nasıl erişebileceğini Bu benim $('.read').click() yılında Altyazıya geçtikten sonra eski metin nasıl alınır?

<script type="text/javascript"> 
    $('div').each(function(i){ 
    fulltext = $(this).text(); 
    if(fulltext.length > 190){  
    $(this).text(fulltext.substring(0,190)).append("<a href='#' class='read'>Read More</a>"); 
    } 
    }); 
    $('.read').click(function(){ 
    //stuck here getting old full text 
    var popup = "<div class='popup'><span class='close'>X</span>"+$(this).parent().text()+"</div>";   $('body').append(popup); 
    }); 
    $('body').on('click','.close',function(){ 
    $('.popup').remove(); 
    }); 
</script> 

jquery

tarafından denenmiş budur

<style type="text/css"> 
div{ 
    width: 50%; 
    height: auto; 
    background: #faaaaf; 
    border : 2px solid #aedd87; 
    position: relative; 
} 
.popup{ 
    position:absolute;top:20%;left:25%;border:1px solid red;background:#f39323;width:50%;height:50%; 
} 
.close{ 
    top: -5; 
    left: 98%; 
    width: 20px; 
    height: 10%; 
    background: brown; 
    position: absolute; 
} 
</style> 
<div>Accelerator beam data commissioning equipment and procedures: 
Report of the TG-106 of the Therapy Physics Committee of the AAPM 
Indra J. Dasa 
Department of Radiation Oncology, University of Pennsylvania, Philadelphia, Pennsylvania 19104 
Chee-Wai Cheng</div> 
<div>Accelerator beam data commissioning equipment and procedures: 
Report of the TG-106 of the Therapy Physics Committee of the AAPM 
Indra J. Dasa 
Department of Radiation Oncology, University of Pennsylvania, Philadelphia, Pennsylvania 19104 
Chee-Wai Cheng 
</div> 
<div>Accelerator beam data commissioning equipment and procedures: 
Report of the TG-106 of the Therapy Physics Committee of the AAPM 
Indra J. Dasa 
Department of Radiation Oncology, University of Pennsylvania, Philadelphia, Pennsylvania 19104 
</div> 

, ???

+0

Fulltext.length> 190'un doğru olmayan sözcük sayısını kontrol ettiğini biliyor musunuz? –

+0

@JoelsElf evet yazım hatası! Karakterleri kastediyorum! –

cevap

2

Kodunuzdaki sorun, bu öğeler oluşturulduktan sonra .read öğeleri için click olayı atamanız gerektiğini düşünüyorum.

$('div').each(function(i){ 
     var fulltext = $(this).text(); 

     if(fulltext.length > 190) { 

     $(this).text(fulltext.substring(0,190)).append("<a href='#' class='read'>Read More</a>"); 
     } 

     $('.read').click(function(){ 
     //stuck here getting old full text 
     var popup = "<div class='popup'><span class='close'>X</span>"+$(this).parent().text()+"</div>";   $('body').append(popup); 
    }); 
    }); 

bu kodu göz at:

fiddle

ben açılan sadece aynı metni gösterecek fark, ben özellik olarak önceki metni kaydetmek için kod değiştirilmiş, böylece açılır var uzun metni gösterebilir.

+0

Doğru cevap (oylama) budur. [Keman] 'ı (https://jsfiddle.net/Lkqw2t26/2/) işaretledim ve metni daha okunaklı hale getirmek için .popup ve .close için css'yi düzelttim. –

İlgili konular