jqueryをロスなく使用して詳細/ lessを使用

jqueryを追加して追加しました。私は次のクエリ実装しました：jqueryをロスなく使用して詳細/ lessを使用

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

あなたはあなたがhtml要素の途中で破ることができる250に0を言わせてのあなたの部分文字列を切断した場合ので、これは簡単なことではありません。

HTMLをそのまま維持する最も簡単な方法は、高さの変更を使用することです。（読み込み量が少なく、要素の高さが例えば50pxであり、readmoreで「auto」など）。

さらに複雑なもう1つの解決策は、メインの.each（）のすべての子要素を合計して合計し、.text（）の長さを250以上にすると、 "readmore"を配置する必要があります。（ただし、あなたのHTML構造によっては、子どもがいない現在の長さがすでに250以上になる可能性があることを考慮する必要があります...

私は高さのアプローチで行くことをお勧めします。あなたを助ける。

出典

2016-08-02 17:57:44

私は$（この）の.html（ t.slice（0、minimize_character_count）+ ' ... '+' Read more' + 「<スパンのスタイル= "表示を変更しました：none; "> '+ t.slice（minimize_character_count、TextContentLenght）+'＆nbsp '+' Read less ' ）; しかし、lessを読み込んだ後は正しく動作せず、read moreで表示を開始します。既存のスクリプトを壊さないものを提供してください。 – 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をロスなく使用して詳細/ lessを使用

答えて

関連する問題