jquery - 用jquery限制文本

Question

我正在尝试将列表视图中的描述文本限制为一定数量的字符，并可以选择在点击时将其余部分切换。限制文本不是问题，它适用于以下代码片段http://jsfiddle.net/lgtsfiddler/G42dR/5/

$("p").each(function(i) {
    len = $(this).text().length;
    if (len > 150) {
        $(this).text($(this).html().substr(0, 150));
    }
});

如何将下拉事件添加到它？

Answer 1

这样做的一种方法是将“预览”部分和文本的其余部分包装在单独的跨度中。然后，您可以添加一个链接来切换包含文本剩余部分的跨度是隐藏还是显示：

$(this).html("<span>" + $(this).text().substr(0,150) + "</span><span style='display:none'>" + $(this).text().substr(150) + "</span>");

var link = $("<a href='#' class='more'>More..</a>");
$(this).append(link);
$(link).click(function(){
    $(this).prev().toggle();
    $(this).html($(this).html()=="More.."?"Less":"More..");
});

演示：http: //jsfiddle.net/G42dR/9/

Answer 2

这对您有帮助吗：

            $('p').each(function(){
                if($(this).text().length > 150){
                    $(this).attr('data-text', $(this).text());
                    $(this).text($(this).text().substring(0, 150));
                    $(this).after($('<a onclick="$(this).prev().text($(this).prev().attr(\'data-text\')); $(this).remove();"> Read more...</a>'));
                }
            });