我遇到一个问题,我们必须在产品详细信息页面的产品描述中显示/隐藏一些文本。描述必须缩短至所需的行数,并通过单击“更多”来显示完整的描述。我从下面的链接中获取了以下脚本:
代码如下:
<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…</a>')
.click(function() {
$(this).find('span').toggle();
$(this).find('a:last').hide();
});
$('div.contentdetail span').hide();
});
</script>
但是通过上面的脚本,整个描述都转换为文本格式。但由于描述包含无序列表、标题标签等,因此不考虑这些。如何修改上面的脚本以按原样显示内容。
最佳答案
使用 html() 而不是 text()。像这样
var text = $('div.contentdetail').html();
var rest = $('div.contentdetail').html().substring(cutoff);
休息是正确的。 text() 将所有 html 节点数据转换为纯文本。 html() 保留它。尝试一下,对我有用。在上一个链接中,问题仅针对文本。由于您还有其他元素,例如链接和其他内容,因此您需要使用 html()
关于javascript - 显示和隐藏动态文本的 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11534840/