动态显示和隐藏文本

我有一个问题，我们必须在产品详细信息页面的产品说明中显示/隐藏某些文本。描述必须缩短到所需的行数，并通过点击“更多”来显示完整的描述。我从下面的链接采取了以下脚本：动态显示和隐藏文本

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

动态显示和隐藏文本

回答

相关问题