閱讀更多/更少使用jquery沒有損失html

我寫了jquery添加閱讀更多/ 250個字符後更少閱讀。我已經實現以下查詢：閱讀更多/更少使用jquery沒有損失html

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標籤。我希望閱讀更多/更少的所有格式。請建議。提前感謝。

來源

2016-08-02 Rajan

您正在使用：

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

所以你就只當你選擇根據您的.html子計數文字的字母（）。這將計算完整的html，包括元素的文本。

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

這不是一件容易的事情，因爲當你削減你的子字符串，比如說0到250時，你可以在html元素中間斷開。

保持HTML的最簡單的解決方案就是使用更改高度。（在讀少，元素的高度是例如50px，然後在閱讀更多的是「自動」或其他）。

另一種更復雜的解決方案是遍歷main .each（）的所有子元素，將它們相加，並且當長度大於250的.text（）長度時，應該放置「readmore」。（但取決於你的HTML結構，你應該考慮到，沒有孩子的當前長度已經可以大於250 ...

我建議去高度的方法，如果不是你可以做一個小提琴，我們可以幫你。

來源

2016-08-02 17:57:44

我已經改變了$（本）的.html（ t.slice（0，minimize_character_count）+ ' ... '+' Read more' + 「的'+ t.slice（minimize_character_count，TextContentLenght）+'＆nbsp'+'Read less' ）; 但它讀取後不能正常工作，並開始顯示閱讀更多。請提供一些不會破壞現有腳本的內容。 – Rajan

我已編輯我的帖子。 –

即使修剪過的字符串也很難保持HTML，這是實際的問題。無法弄清楚這一點！ – Rajan

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

來源

2017-09-07 11:27:59 Sheo

閱讀更多/更少使用jquery沒有損失html

回答

相關問題