web-dev-qa-db-ja.com

段落の最初の100文字をトランケートし、段落の残りのコンテンツを非表示にして、リンクの増減でリンクの残りの部分を表示/非表示

500文字を超える段落があります。最初の100文字だけを取得し、残りを非表示にしたい。また、100文字の横に「その他」リンクを挿入したいと思います。さらにリンクをクリックすると、段落全体がテキスト「More」を表示して「Less」に編集し、「Less」をクリックすると動作が切り替わります。段落が動的に生成される.wrap（）を使用してその内容をラップすることはできません。これが私が持っているものと欲しいものの例です。

これは私が持っているものです：

  <p>It is a long established fact that a reader will be distracted by the readable 
   content of a page when looking at its layout. The point of using Lorem Ipsum is that
   it has a more-or-less normal distribution of letters, as opposed to using 'Content 
  content here', making it look like readable English. Many desktop publishing packages 
   and web page editors now use Lorem Ipsum as their default model text.</p>

これは、DOMが読み込まれるときに必要です

 <p>It is a long established fact that a reader will be distracted by ..More</p>

これは、ユーザーが[詳細]をクリックしたときに必要なものです

   <p>It is a long established fact that a reader will be distracted by the readable 
   content of a page when looking at its layout. The point of using Lorem Ipsum is that
   it has a more-or-less normal distribution of letters, as opposed to using 'Content 
  content here', making it look like readable English. Many desktop publishing packages 
   and web page editors now use Lorem Ipsum as their default model text. ..Less</p>

「Less」をクリックすると、「More」をクリックしたときの動作が元に戻ります。

私はjQueryを使用して、非表示にしたいスパンに部分文字列を分割、スライス、ラップしていますが、それは機能しません。

var title = $("p").text();
var shortText = jQuery.trim(title).substring(100, 1000).split(" ")
    .slice(0, -1).join(" ") + "...More >>";
shortText.wrap('</span>');
javascriptjqueryxhtml
17
Raj Mehta

フィドル： http://jsfiddle.net/iambriansreed/bjdSF/

jQuery：

jQuery(function(){

    var minimized_elements = $('p.minimize');
    var minimize_character_count = 100;    

    minimized_elements.each(function(){    
        var t = $(this).text();        
        if(t.length < minimize_character_count ) return;

        $(this).html(
            t.slice(0,minimize_character_count )+'<span>... </span><a href="#" class="more">More</a>'+
            '<span style="display:none;">'+ t.slice(minimize_character_count ,t.length)+' <a href="#" class="less">Less</a></span>'
        );

    }); 

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

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

});​
38
iambriansreed

これはGoogleの上位の結果ではありませんが、私は jQuery Expander plugin を使用して大きな成功を収めました。検索エンジンロボットから何も隠さないため、これは素晴らしいことです。

4
Zach M.

@iambriansreedのNice関数に感謝します。改行（-===-）でtruncate段落を少し変更します：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
jQuery(function(){

var minimized_elements = $('p.minimize');
var maxLines = 20;

minimized_elements.each(function(){    
    // var textArr = $(this).text().split(/\n/); // Not supported in IE < 9
    var textArr = $(this).html().replace(/\n?<br>/gi,"<br>").split(/<br>/);
    var countLines = textArr.length;

    if (countLines > maxLines) {
        text_less = textArr.slice(0, maxLines).join("<br>");
        text_more = textArr.slice(maxLines, countLines).join("<br>");
    }
    else return;

    $(this).html(
        text_less + '<span>... </span><a href="#" class="more">More</a>'+
        '<span style="display:none;">'+ text_more +' <a href="#" class="less">Less</a></span>'
    );
}); 

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

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

});

</script>
3
Noam Manos

他のカップルが私を殴ったように見えますが、これが私が思いついたものです。

var MORE = "... More...",
    LESS = " Less...";

$(function(){
    $("p").each(function(){
        var $ths = $(this),
            txt = $ths.text();

        //Clear the text
        $ths.text("");

        //First 100 chars
        $ths.append($("<span>").text(txt.substr(0,100)));

        //The rest
        $ths.append($("<span>").text(txt.substr(100, txt.length)).hide());

        //More link
        $ths.append(
            $("<a>").text(MORE).click(function(){
                var $ths = $(this);

                if($ths.text() == MORE){
                    $ths.prev().show();
                    $ths.text(LESS);
                }
                else{
                    $ths.prev().hide();
                    $ths.text(MORE);
                }
            })
        );
    });
});
2
illTyped

jQuery Truncator プラグインを見ましたか？

それはほとんどあなたが説明したことを正確に行います。

2
Brandon

ここに来て、もっと見たい人を探しています...これは別のプラグインです http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/

0
Kundan Singh