如何通过子字符串更改后得到旧文本？

Question

这里我试图显示每个div文本。但是如果div文本会大于190个单词做切词并只显示190个单词与read more链接。我在点击read more link时无法显示旧全文。不知道如何存储相关的旧全文并以弹出式样重新显示。

<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

我认为你的代码中的问题是你必须在创建这些元素之后为.read元素指定click事件。

$('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

我意识到，在弹出只显示了相同的文字，我已经修改了代码，保存以前的文本属性，因此在弹出可以显示长文本。