動態顯示和隱藏文本

我有一個問題，我們必須在產品詳細信息頁面的產品說明中顯示/隱藏某些文本。描述必須縮短到所需的行數，並通過點擊「更多」來顯示完整的描述。我從下面的鏈接採取了以下腳本：動態顯示和隱藏文本

Using javascript substring() to create a read more link

，代碼如下：

<script type="text/javascript"> 
    $(function() { 
     var cutoff = 200; 
     var text = $('div.contentdetail').text(); 
     var rest = $('div.contentdetail').text().substring(cutoff); 
     if (text.length > 200) { 
      var period = rest.indexOf('.'); 
      var space = rest.indexOf(' '); 
      cutoff += Math.max(Math.min(period, space), 0); 
     } 
     rest = text.substring(cutoff); 
     var visibleText = $('div.contentdetail').text().substring(0, cutoff); 
     $('div.contentdetail') 
      .html(visibleText + ('<span>' + rest + '</span>')) 
      .append('<a title="Read More" style="font-weight:bold;display:block;cursor: pointer;">Read More&hellip;</a>') 
      .click(function() { 
       $(this).find('span').toggle(); 
       $(this).find('a:last').hide(); 
      }); 
     $('div.contentdetail span').hide(); 
    }); 
</script>

但與上面的腳本整個描述轉換爲文本格式。但由於描述包含無序列表，標題標籤等，因此不考慮這些內容。如何修改上述腳本以按原樣顯示內容。

來源

2012-07-18 Anantha Lakshmi

使用html（）代替text（）。像這樣

var text = $('div.contentdetail').html(); 
var rest = $('div.contentdetail').html().substring(cutoff);

其餘的都是正確的。 text（）以純文本格式轉換所有html節點數據。 html（）保留它。給它一下，爲我工作。在前面的鏈接中，問題僅限於文本。由於你有其他元素，如鏈接和其他東西，你需要使用HTML（）

來源

2012-07-18 06:07:21 Shades88

@ Shades88-Thanx爲你的answer.i改爲html（）代替文本（），但是當我指定截止爲900個字符時腳本不考慮和隱藏無序列表 – 2012-07-18 11:38:10

ohh您還必須在此行中將text（）替換爲html（）var varTextText = $（'div.contentdetail'）.text（）。substring（0，cutoff）; '。我忘了提到那條線，但你可能已經知道了。另外，當你把截斷的東西放大到你的文本長度時，你的'rest'變量將是空白的，因爲substring只是在包含少於900個字符的文本中找不到索引900。所以最好檢查一下你的'rest'變量是否保持值。如果它是空白的，那麼你不應該繼續下去，並將其留下。 – Shades88 2012-07-18 19:26:48

如果您發現這個有用，請將其標記爲答案:) – Shades88 2012-07-18 19:27:19

動態顯示和隱藏文本

回答

相關問題