如何通過子字符串更改後得到舊文本？

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

我意識到，在彈出只顯示了相同的文字，我已經修改了代碼，保存以前的文本屬性，因此在彈出可以顯示長文本。