如何创建“读少"的消息?链接按钮以显示较少的文本 [英] How to create the "less read" link button to display less of the text

问题描述

我需要帮助... 我有一些文字的帖子 "blablablabalbalbalablala ...阅读更多" 当我点击阅读更多时，我会看到整个帖子， 用此代码

I need help... I have posts with some text "blablablabalbalbalablala... Read More" When I click on Read more I see whole post, with this code

$(function(){ 
 $('.news').each(function(event){ 
    var max_length = 450; 
    if($(this).html().length > max_length){ 
            var short_content   = $(this).html().substr(0,max_length); 
            var long_content    = $(this).html().substr(max_length);
    $(this).html(short_content+'<a href="#" class="read_more" style="float:right; margin:20px 40px 0 0;"><br/>Read More</a>'+ '<span class="more_text" style="display:none;">'+long_content); 
    $(this).find('a.read_more').click(function(event){
        event.preventDefault(); 
    $(this).hide();
    $(this).parents('.news').find('.more_text').show(); 
    });  
    }
    }); 
});

那很好，但是， 如何添加读取较少"按钮，所以当我单击该按钮时，我将回到先前的位置...?

That works fine but, How to add Read less button so when I click on it I will be back in the previous position...?

这里是新消息，很抱歉... 好的，我有

New here so sorry... Ok I have

<div class="news"> some text some text some text some text some text some text </div>

阅读更多内容在我的jquery代码中...所以我不知道如何添加阅读较少" ...? :)

and read more is inside my jquery code... so I don't know how to add Read Less...? :)

推荐答案

我不得不稍微修改一下您的代码，看看此处

I had to modify your code a little, have a look here

我添加了另一个按钮(读取较少")，该按钮将.news标记的innerHTML更改为short_content值

I've added another button (Read Less) that changes the innerHTML of the .news tag to the short_content value

$('a.read_less').click(function(event) {
                event.preventDefault();
                $(me).html(short_content);
                $(this).hide();
                $('a.read_more').show();
});

这篇关于如何创建“读少"的消息?链接按钮以显示较少的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！