Summarize dynamic PHP texts with jquery

3

I've been able to do the View More function, with a StackOverflow code here, but the texts come from the dynamic database, so how do I get this code to get every text?

Code in php:

< div class="box-body" id="texto">
    <?php
        $texto = htmlentities($row['texto']);
        $texto = preg_replace('/[\n\r]{1,}/',"\n\n",$texto);
        echo nl2br(emoticons($texto)); 
    ?>
</ div>

Jquery code:

var wordLimit = 50;
$(function() {
  //trata o conteúdo na inicialização da página
  $('#texto').each(function() {
    var post = $(this);
    var text = post.text();
    //encontra palavra limite
    var re = /[\s]+/gm, results = null, count = 0;
    while ((results = re.exec(text)) !== null && ++count < wordLimit) { }
    //resume o texto e coloca o link
    if (results !== null && count >= wordLimit) {
      var summary = text.substring(0, re.lastIndex - results[0].length);
      post.text(summary + '...');
      post.data('original-text', text);
      post.append('<br/><a href="#" class="read-more">Leia mais</a>');
    }
  });

  //ao clicar num link "Leia mais", mostra o conteúdo original
  $('.read-more').on('click', function() {
    var post = $(this).closest('#texto');
    var text = post.data('original-text');
    post.text(text);
  });

}); 
    
asked by anonymous 05.11.2016 / 23:20

1 answer

1

Whenever I have to do this, I do it that way, which I find simpler:

$(function(){
  // escondo todos os textos completos
  $('.more').hide();
  
  // quando clicar em ver mais
  $('.see').click(function(){
    // pego o ID
    var id = $(this).prop('id');
    // mostro a publicação completa do post
    $('section#p'+id+' > .more').show('fast');
    // oculto o resumo daquele post
    $('section#p'+id+' > .abstract').hide('fast');
  });
  
  // quando clicar em ver menos
  $('.hide').click(function(){
    // pego o ID
    var id = $(this).prop('id');
    // oculto a publicação completa do post
    $('section#p'+id+' > .more').hide('fast');
    // mostro o resumo daquele post
    $('section#p'+id+' > .abstract').show('fast');
  });
});
.post { 
  border: 1px solid #000;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><sectionclass="post" id="p1">
  <div class="abstract">
    Texto resumido pelo php est...
    <a href="#" class="see" id="1" >Ver Mais</a>
  </div>

  <div class="more">
    <p>Texto resumido pelo php está completo agora</p>
    <a href="#" class="hide" id="1" >Ver Menos</a>
  </div>
</section>

<section class="post" id="p4">
  <div class="abstract">
    Mais um post com descrição ...
    <a href="#" class="see" id="4" >Ver Mais</a>
  </div>

  <div class="more">
    <p>Mais um post com descrição resumida com PHP que agora 
    está sendo exibido inteiro</p>
    <a href="#" class="hide" id="4" >Ver Menos</a>
  </div>
</section>
    
10.11.2016 / 13:56