Укоротите абзац первого порядка 100 символов и спрячьте содержимое содержания в параграфе, чтобы показать/скрыть контингент отдыха с большей/меньшей ссылкой - программирование
Подтвердить что ты не робот

Укоротите абзац первого порядка 100 символов и спрячьте содержимое содержания в параграфе, чтобы показать/скрыть контингент отдыха с большей/меньшей ссылкой

У меня есть параграф, который имеет более 500 символов. Я хочу получить только начальный 100 символов и скрыть его. Также я хочу вставить ссылку "Больше" рядом с 100 символами. При щелчке дополнительной ссылки весь абзац должен отображать и редактировать текст "Больше" на "Меньше" , а при нажатии "Меньше" он должен переключать поведение. Параграф динамически генерируется. Я не могу обернуть его содержимое с помощью .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 для разделения, среза и обертки подстроки в span, который я хочу скрыть, но это не работает.

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

ОТВЕТЫ

Ответ 1

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();    
    });

});​

Ответ 2

Это не лучший результат Google, но я использовал плагин jQuery Expander с большим успехом. Это приятно, потому что оно ничего не скрывает от роботов поисковых систем.

Ответ 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>

Ответ 4

Похоже, что другие люди избили меня, но вот что я придумал.

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);
                }
            })
        );
    });
});

Ответ 5

Вы просмотрели плагин jQuery Truncator?

Это в значительной степени делает именно то, что вы описали.