Как получить старый текст после смены подстроки?

Question

Здесь я пытаюсь отобразить каждый текст div. Но если текст div будет более 190 слов, вырезать слова и показывать только 190 слов с помощью read more link.I иметь проблемы при отображении старого полного текста при нажатии read more link.Don't know how для хранения актуального старого полнотекстового текста и повторного отображения в стиле всплывающих окон.

<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> 

Это то, что я попытался с помощью JQuery

<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> 

В $('.read').click(), как я могу получить доступ к старому полный текст и дисплей в всплывающем окне ???

Answer 1

Я думаю, что проблема в вашем коде заключается в том, что вы должны назначить событие click для элементов .read после создания этих элементов.

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

Посмотрите на этот код:

fiddle

я понимаю, что всплывающее окно просто показать один и тот же текст, я изменил код, чтобы сохранить предыдущий текст в качестве атрибута, поэтому всплывающее окно может показывать длинный текст.