18

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>

「少ない」をクリックすると、「多い」をクリックしたときの動作が元に戻ります。

jQueryを使用して、サブストリングを非表示にしたいスパンに分割、スライス、およびラップしていますが、それは機能しません。

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

6 に答える 6

40

フィドル: 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();    
    });

});​
于 2012-07-10T16:36:50.603 に答える
4

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

于 2012-07-10T16:21:26.180 に答える
3

@iambriansreed の優れた機能に感謝します。改行で段落を切り捨てるためのわずかな変更を次に示します。

<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>
于 2013-11-11T11:52:21.453 に答える
2

jQuery Truncatorプラグインを見たことがありますか？

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

于 2012-07-10T16:17:23.580 に答える
2

他の人が私を打ち負かしたように見えますが、これが私が思いついたものです.

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);
                }
            })
        );
    });
});
于 2012-07-10T16:55:45.623 に答える
0

詳細を表示するためにここに来たすべての人のために... ここに別のプラグインがありますhttp://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/

于 2015-01-07T15:16:37.637 に答える