Mostre o botão ‘Ver mais’ usando jQuery

Essas pequenas linhas de código permitem exibir o botão ‘Ver mais’ nos seus textos de parede, para que não pareça gigantesco ou não sei. O que quer que você possa usar.

$(document).ready(function() {

    var my_div = $('.that_div_whose_selector_is_too_long');

    /*  Expands the selection to every item with that class  */

    my_div.each(function(event) {        

        var max_length = 150;

/* Verify if it surpasses the limit */

        if (my_div.html().length > max_length) {

/* Cuts the text with the substr method. I'll explain it below */ 

            var short_text = $(this).html().substr(0, max_length);
            var long_text = $(this).html().substr(max_length);

/*  Modifies the html so it displays the shortened text  */

            $(this).html(short_text + 
                "<a href='#' class='view_more_button'>...View more</a>" + 
                "<span class='rest_of_text' style='display: none;'>" + long_text + "</span>");

/* Note how we added a span containing the rest of the text, but it is not showing itself. */

            $(this).find('a.view_more_button').click(function(event) {

/* Prevents the 'a' from changing the url */

                event.preventDefault();

/* Hides the 'view more' */

                $(this).hide(); 

/* Displays the rest of the text */

                $(this).parents(my_div).find('.rest_of_text').show(); 
            });
        }
    });
});

Agora, sobre a função substr . Esta função corta uma string (neste caso, o html dentro de nosso div) e tem dois parâmetros:

• O ponto de partida (cada string começa em 0)
• O ponto final ( opcional )

primeiro nós fizemos isso:

var short_text = $(this).html().substr(0, max_length);

Digamos, por exemplo, que a string dentro de nosso div seja “Olá, sou um div incrível” e nosso comprimento máximo seja 16 . Nesse caso, ** texto curto ** seria igual a:

Hello, I'm an awe

Dado isso, usando substr para obter o resto da string, usaríamos:

var long_text = $(this).html().substr(max_lenght);

E é o mesmo que:

some div

Então, quando unimos esses dois, obtemos a mensagem completa …

Hello, I'm an awesome div
|-- short text -||-long text-|

* ATUALIZAÇÃO * – solicitação Ajax

Agora, para um exemplo prático com ajax, o código seria quase o mesmo. Tudo o que você precisa fazer é uma solicitação $ .get () .

$.get('your_file.txt', function(data) {

    // Same instructions from above
    var data_short = data.substr(0, max_length);
    var data_long = data.substr(max_length);

    // ...As I said, same instructions from above.

}); //End of the $.get() request.