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

Question

我试图在段落末尾添加“显示更多”链接，但“更多”链接未正确显示或未按正确的字符数 chop 。

此处代码: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. 最后你错过了将 display: none (或类似的东西)添加到你的 <span> 中。带有隐藏的附加内容。

修复版本

$(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/