javascript - jQuery 显示 - 必要时隐藏 "read more"

Question

如何使用 jQuery 显示和隐藏按钮阅读更多。我不知道如何选择全文长度并检查是否需要“阅读更多”按钮。例如，我有 1000 个符号的限制，然后显示按钮阅读更多

例如我有一篇文章和:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat... (read more) when click and I can see full text

但是，如果我的符号少于 1000 个，我想说我不需要“阅读更多”此限制中的文本长度，并且不需要“阅读更多”按钮。需要隐藏。谢谢!

Answer 1

试试这个:

html:

<div class="more"> a lot of text </div>

js:

$(function(){
var showChar = 130;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function() {
     var content = $(this).html();             
     if(content.length > showChar) {             
        var c = content.substr(0, showChar-1);
        var h = content.substr(showChar-1, content.length - showChar);             
        var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a 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;
 });
});

但是:我无法完成代码，js 中有小错误，请进一步解决这个问题。我现在需要学习准备考试..抱歉

这是 jsfiddle: http://jsfiddle.net/CbLbu/