自定义加载更多文本功能

custom load more text function

本文关键字：文本 功能 加载 自定义      更新时间：2023-09-26

假设我们有这个：

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</div>
<div class="porfolio-single-load-more">
    <a href="#" class="icon-holder prevent-history">
        <i class="icon-plus"></i>
    </a>
</div>

我们只想显示前300个字符，当点击加载更多按钮时，显示其余的文本，

我想解决方案是将多余的字符包装到一个隐藏的div中，但我不知道如何做到这一点，

我如何用div从char301换行到文本末尾？

var textcnt = this.mainCnt.find('.single-portfolio .content');
if(textcnt.text().length > 300){
    /* ?? */
}else{
        $('.porfolio-load-more a').remove();
 }

这里的问题是每一行代码都是自己的DOM元素。如果你不能重构底层的html，那么你要做的就是迭代每个p元素，提取html文本（并附加到一个字符串），擦除内容div，然后插入字符串和div分隔符。

所以类似的东西

var full = "";
$('.content').children('p').each(function(){
  full = full.concat($(this).html());
}
$('.content').html("");
var first = full.substring(0, 300);
var rest = full.substring(301);
$('.content').append(first + "</div><div id='"hidden'">" + rest);

这将按照您想要的方式拆分div。将display of hidden设置为none，然后用$.on（）将onclick处理程序附加到按钮上，以显示（）it

试试这个

var wtext = $('.content').html().substr(300);
$('.content').html( $('.content').html().substr(0, 300) + '<span class="hidden">' + wtext + '</span>' );

当然，这不考虑标签，所以很不幸，它可能会被拆分到html标签的中间。在这种情况下，您需要进行某种检查以防止这种情况发生。

尝试使用jquery数据来存储全文。我做了一个简单的测试。你可以试试。

JavaScript:

var $textcnt = $(".content p");
if($textcnt.text().length>300){
    $.data(document.body,"content",$textcnt.text());
    $textcnt.text($textcnt.text().substr(0,300)+"...");
}else
{
   $("#read-more").remove(); 
}
$("#read-more").click(function(){
    $textcnt.text($.data(document.body,"content"));
});

Html:

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <a id="read-more" href="#" class="icon-holder prevent-history">
        Read more
    </a>
</div>

这是JSFIDDLE演示

希望这对你有帮助。

我最终向表中添加了CSS。。

不破坏标记是非常棘手的（尤其是当将更新标记的用户不了解HTML时）

这就是我所做的：

var textcnt = this.mainCnt.find('.single-portfolio .content');
        if(textcnt.text().length > 300){
            /* ?? */
            textcnt.addClass('ellipsis');
            this.mainCnt.on('click','.porfolio-single-load-more a',function (e) {
                e.preventDefault();
                $('.porfolio-single-load-more a').fadeOut(300,function(){ textcnt.removeClass('ellipsis');$(this).remove(); });
            });
        }else{
            $('.porfolio-single-load-more a').remove();
        }

然后使用css

.ellipsis{ max-height: 300px; /* som amount that matchs the line-height*font-size per line (ex: 5lines*18px*20px) */ }
相关文章：