javascript - 使用 jquery 显示更多文本

Question

我正在寻找一种显示更多或更少文本的方法。我想默认显示 600 个字符，如果单击显示更多，它将显示 600 个以上的字符，然后如果再次单击，则显示 600 个以上的字符，直到没有更多的字符。我还想要一个“减少显示”按钮，将文本折叠回默认的 600 个字符。我的页面有 5000 多个单词，这将使阅读变得更容易并且看起来更好。现在我用它来显示前 600 个字符，当单击“显示更多”时，它会一直展开。

$(document).ready(function() {
var showChar = 600;
var ellipsestext = "...";
var moretext = "View more";
var lesstext = "View less";
$('.more').each(function() {
    var content = $(this).html();

    if(content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar-1, content.length - showChar);

        var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '&nbsp;&nbsp;</span><a rel="nofollow" href="" class="morelink">'+moretext+'</a></span>';

        $(this).html(html);
    }

});

$(".morelink").click(function(){
    if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
});
});

有人可以编辑此代码以使其像这样工作或帮助我以其他方式实现此目的吗？我真的很想让我的页面更加美观和可读，这肯定会成功。谢谢。

Answer 1

我编写了以下代码来向您展示如何从查看器中获取有关行数的信息:

HTML:

<div style="height: 6em; overflow: auto; line-height: 1.5em">
    <p> Number of lines to display  (optional) <input type="text" value="4" style="width: 3em"><button type="button" class="scrollLength">change</button></p>
    <p>
        This is a huge load of text<br>
        line 2<br>
        line 3<br>
        line 4<br>
        ...etc....
    </p>
</div>

jQuery 代码:

$('button.scrollLength').each(function(){
    var $this = $(this);
    $this.click(
        function(){
            var myParent      = $this.parent();
            var numberOfLines = myParent.children('input').attr('value');
            var displayArea    = myParent.parent();
            if (numberOfLines > 0) {
                var lineHeight  = displayArea.css('lineHeight');
                var heightUnits = lineHeight.replace(/[0-9]./g, '');
                displayArea.css({height: (numberOfLines * parseFloat(lineHeight)) + heightUnits});
            }
        }
    );
});

问候 尼尔