在不丢失html的情况下使用jquery多读/少读_Jquery

在不丢失html的情况下使用jquery多读/少读

jquery

在不丢失html的情况下使用jquery多读/少读,jquery,Jquery,我已经编写了jquery，在250个字符后添加readmore/readless。我实现了以下查询： var minimized_elements = $('.field-type-text-with-summary .field-items'); var minimize_character_count = 250; minimized_elements.each(function(){ var TextContent = $(this).text(); var Tex

我已经编写了jquery，在250个字符后添加readmore/readless。我实现了以下查询：

var minimized_elements = $('.field-type-text-with-summary .field-items');
var minimize_character_count = 250;    
minimized_elements.each(function(){    
  var TextContent = $(this).text();
  var TextContentLenght = TextContent.length;
  var t = $(this).html();
  if(t.length < minimize_character_count ) return;
  $(this).html(
    t.slice(0,minimize_character_count)+
      '<span>...</span>'+'<a href="#" class="read_more"     style="color:#FF8403;">Read more</a>'+
      '<span style="display:none;">'+ TextContent.slice(minimize_character_count,TextContentLenght)+'&nbsp'+'<a href="#" class="read_less" style="color:#FF8403;">Read less</a></span>'
    );  
  });
  $('a.read_more', minimized_elements).click(function(event){
    event.preventDefault();
    $(this).hide().prev().hide();
    $(this).next().show(); 

  });
  $('a.read_less', minimized_elements).click(function(event){
    event.preventDefault();
    $(this).parent().hide().prev().show().prev().show();

  });

var minimized_elements=$（'.field类型文本，带summary.field项'）；
变量最小化字符计数=250；
最小化了_元素。每个（函数（）{
var TextContent=$（this.text（）；
var TextContentLenght=TextContent.length；
var t=$（this.html（）；
if（t.length<最小化字符数）返回；
$（this.html）(
t、 切片（0，最小化字符计数）+
'...'+''+
''+TextContent.slice（最小化字符数，TextContentLenght）+' '+''
);  
});
$（'a.read\u more'，最小化\u元素）。单击（函数（事件）{
event.preventDefault（）；
$（this.hide（）.prev（）.hide（）；
$（this.next（）.show（）；
});
$（'a.read_less'，最小化元素）。单击（函数（事件）{
event.preventDefault（）；
$（this）.parent（）.hide（）.prev（）.show（）.prev（）.show（）；
});

但我的问题是，这个脚本删除了所有html标记，比如如果文本包含粗体或下划线字符，它会将所有文本显示为纯文本。我想多读/少读所有的格式化。请建议。提前感谢你

您正在使用：

 var TextContent = $(this).text();

因此，只有在基于.html（）选择子字符串时，才能计算文本的字母数。这将计算包含元素文本的完整html

var TextContent = $(this).html();

<>这不是一件容易的事情，因为当你把你的子串切成0到250时，你可以在HTML元素中间中断。< /P> 保持HTML不变的最简单解决方案是使用更改高度。（在READLESS上，元素的高度例如为50px，而在readmore上，则为“自动”或其他）

另一个更复杂的解决方案是遍历main.each（）的所有子元素，对它们求和，当组合的.text（）长度大于250时，应该放置“readmore”。（但根据HTML结构的不同，您应该考虑不带子项的当前长度可能已经大于250

我建议采用高度法，如果不行，你可以做一把小提琴，我们可以帮助你。


    <!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.readLess{ display:none;}
.conteMain{ border:1px solid #ddd; background:#f5f5f5; padding:10px; font:normal 14px Arial, Helvetica, sans-serif;}
#conteMain p{ margin:0; padding:0;}
.readLess,.readMore{ background:#3CF; color:#fff; padding:5px 10px; width:80px; margin:10px 0px; cursor:pointer}
.readLess:hover,.readMore:hover{ background:#090}
</style>
</head>

<body>
<div class="conteMain">
<div id="conteMain">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br>
<br>
<p>vived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like </p><br>

<p>vived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like </p><br>

<p>vived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like </p><br>

<p>vived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like </p><br>

<div>ved not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software l</div><br>


 It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    var conte = $("#conteMain").text().length;
    var conte1 = $("#conteMain").text();
    var bx1 = conte1.slice('',200); 

    if(conte > 200){
        $("#conteMain").after("<span class='moreC'>"+ bx1 +"</span>"+"<div class='readMore'>Read More</div><div class='readLess'>Read Less</div>");
        $("#conteMain").css("display","none");
    };

    $(".readMore").click(function(){
        $("#conteMain").slideDown("slow");
        $(".moreC").css("display","none");
        $(".readLess").css("display","block");
        $(this).css("display","none");
    });

    $(".readLess").click(function(){
        $("#conteMain").slideUp("slow");
        $(".moreC").css("display","block");
        $(".readMore").css("display","block");
        $(this).css("display","none");
    });

</script>
</body>
</html>

无标题文件
.readLess{display:none；}
.conteMain{边框：1px实心#ddd；背景：f5；填充：10px；字体：普通14px Arial，Helvetica，无衬线；}
#contetmain p{margin:0；padding:0；}
.readLess.readMore{背景：3CF；颜色：fff；填充：5px 10px；宽度：80px；边距：10px 0px；光标：指针}
.readLess:hover.readMore:hover{background:#090}
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本字体样本书。



它不仅存活了五个世纪，而且还飞跃到了电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近又通过桌面出版软件如


它不仅存活了五个世纪，而且还飞跃到了电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近又通过桌面出版软件如


它不仅存活了五个世纪，而且还飞跃到了电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近又通过桌面出版软件如


它不仅存活了五个世纪，而且还飞跃到了电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近又通过桌面出版软件如


ved不仅持续了五个世纪，而且还跨越到电子排版，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近又通过桌面出版软件l

它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件包括Lorem Ipsum版本。
var conte=$（“#conteMain”）.text（）.length；
var conte1=$（“#conteMain”）.text（）；
var bx1=conte1.切片（“”，200）；
如果（内容>200）{
$（“#conteMain”）。在（“+bx1+”+“多读少读”）之后；
$（“#conteMain”）.css（“显示”、“无”）；
};
$（“.readMore”）。单击（函数（）{
$（“#conteMain”）。向下滑动（“慢速”）；
$（“.moreC”）.css（“显示”、“无”）；
$（“.readLess”）.css（“显示”、“块”）；
$（this.css（“显示”、“无”）；
});
$（“.readLess”）。单击（函数（）{
$（“conteMain”）.slideUp（“slow”）；
$（“.moreC”）.css（“显示”、“块”）；
$（“.readMore”）.css（“显示”、“块”）；
$（this.css（“显示”、“无”）；
});

我已更改$（this）.html（t.slice（0，最小化字符数）+'…'+'+'''+''+t.slice（最小化字符数，TextContentLenght）+'+''；但在它运行后，read less无法正常工作，并开始以read more显示。请提供一些不会破坏现有脚本的内容。即使对于已修剪的字符串，也很难保持HTML，这是实际问题。无法解决此问题！看看这个-，想法是使用.conte运行nts过滤器节点类型==3，计算每个长度，当达到最大长度时，插入跨度。