显示更多链接未检测字符限制

Question

我试图在段落的末尾添加show more链接，但是更多的链接没有正确显示或者没有截断正确的字符数。

此处代码：https://jsfiddle.net/7sp0mpp8/

$(document).ready(function() {


    var showChar = 300;
    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);
            var h = content.substr(showChar-1, content.length - showChar);

            var html = c + '<span class="moreelipses">'
                             + ellipsestext 
                         + '</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;
    });
});

Answer 1

这里有3个主要问题：

1. 忘记包含jQuery库
2. 将子字符串转换为h变量很糟糕 - 它也是从c变量中取出最后一个字符
3. 最后，您错过了向<span>添加display：none（或类似内容）的隐藏式附加内容。

修正版

$(document).ready(function() {

    var showChar = 30;
    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);
            var h = content.substr(showChar, content.length - showChar);

            var html = c + '<span class="moreelipses">'+ellipsestext+'</span><span class="morecontent"><span style="display:none;">' + 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;
    });
});

https://jsfiddle.net/7sp0mpp8/2/

Answer 2

添加Jquery 然后你需要一些修复来隐藏css以获得更多内容。添加$(".morecontent").css('display', 'none');并将morecontent类添加到内部区域而不是外部区域，如

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

完整代码段。

$(document).ready(function() {
    var showChar = 300;
    var ellipsestext = "";
    var moretext = "more";
    var lesstext = "less";
    $('.more').each(function() {
        var content = $(this).text();
    console.log(content.length)
        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar-1, content.length - showChar);
      console.log(c);
            var html = c + '<span class="moreelipses">'+ellipsestext+'</span><span ><span class="morecontent">' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';

            $(this).html(html);
      $(".morecontent").css('display', 'none');
        }

    });

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

JSFIDDLE