web-dev-qa-db-fra.com

Tronquez le premier paragraphe de 100 caractères et masquez le contenu restant du paragraphe pour afficher/masquer le reste du texte avec un lien plus/moins

J'ai un paragraphe qui a plus de 500 caractères. Je veux obtenir seulement 100 caractères initiaux et masquer le reste. Aussi, je veux insérer le lien "Plus" à côté de 100 caractères. En cliquant sur plus de liens, tout le paragraphe devrait afficher et modifier le texte "Plus" en "Moins" et en cliquant sur "Moins", il devrait basculer le comportement. Le paragraphe est généré dynamiquement. Je ne peux pas en emballer le contenu en utilisant .wrap (). Voici un exemple de ce que j'ai et de ce que je veux.

C'est ce que j'ai

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

C'est ce que je veux quand DOM charge 

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

C'est ce que je veux quand l'utilisateur clique sur "Plus"

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

Lorsque nous cliquons sur "Moins", il devrait revenir sur ce que nous avons cliqué sur "Plus".

J'utilise jQuery pour scinder, découper et envelopper la sous-chaîne en une étendue que je souhaite masquer, mais cela ne fonctionne pas.

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

Fiddle: 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

Ce n’est pas un excellent résultat sur Google, mais j’ai utilisé le plugin jQuery Expander pour un grand succès. C'est gentil parce qu'il ne cache rien aux robots des moteurs de recherche.

4
Zach M.

Merci à @iambriansreed pour sa fonction Nice, voici une légère modification de tronque le paragraphe sur les sauts de ligne :

<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

On dirait que quelques autres personnes m'ont battu, mais voici ce que j'ai trouvé.

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

Avez-vous regardé le jQuery Truncator plugin?

Cela correspond presque exactement à ce que vous avez décrit.

2
Brandon

pour tous ceux qui sont venus ici pour chercher plus ... Voici un autre plug-in http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/

0
Kundan Singh