Question

我写了jquery，在250个字符后添加更多/更少阅读。我已经实现了以下查询：

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();

  });

但我的问题是这个脚本删除所有的html标签，如果文本包含粗体或带下划线的字符，它将所有文本显示为纯文本。对于所有格式化，我希望阅读更多/阅读更少。请建议。提前谢谢。

Answer 1

您正在使用：

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

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

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

这不是一件容易的事情，因为当你剪切你的子串，假设0到250时，你可以在html元素的中间打破。

保持HTML原样的最简单方法是使用更改高度。（在读取较少时，元素的高度为例如50px，然后在readmore上它是“auto”或其他）。

另一个更复杂的解决方案是遍历主.each（）的所有子元素，对它们求和，当你将.text（）长度大于250时，你应该放置“readmore”。（但是根据你的HTML结构，你应该考虑到没有孩子的当前长度已经超过250 ...

我建议采用身高方法，如果不是，你可以做一个小提琴，我们可以帮助你。

Answer 2

    <!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>

使用jquery阅读更多/更少而不会丢失html

2 个答案: