Javascript 如何使用jquery创建阅读更多

我需要在jQuery中创建readmore函数，例如，当字符长度为30时，显示文本，但当字符更多时，仅显示30个字符

$('.dep_buttons').mouseover(function(){
    // please insert script here
    $(this).stop().animate({height:"100px"},150); // when character > 30 need this
    $(".dep_buttons").mouseout(function(){
        $(this).stop().animate({height:"30px"},150);
    });
});

---

为了不给你灌输答案，我将给你以下链接：

,

---

检查字符串的长度。如果大于30，则获取包含前30个字符的子字符串。

使用JavaScrit

。length

函数，您可以计算字符串

我没有试过，但它可能是这样的：

if(foo.length > 30) {
'do something'
}
else {
'do something'
}

---

您可以找到

html元素的
长度
，如

$('.dep_buttons').mouseover(function(){
    if($('.dep_buttons').text().length > 30) { //if length of text is > 30 => animate
        $(this).stop().animate({height:"100px"},150);
    }
});
$(".dep_buttons").mouseout(function(){
    if($('.dep_buttons').text().length > 30) {
       $(this).stop().animate({height:"30px"},150);
    }
});

$('.dep_buttons').mouseover(function () {
    //// $(this).text()
    if ($(this).text().length > 30) { //if length of text is > 30 => animate
        $(this).stop().animate({
            height: "100px"
        }, 150);
    }
});
$(".dep_buttons").mouseout(function () {
    if ($(this).text().length > 30) {// $(this).text()
        $(this).stop().animate({
            height: "30px"
        }, 150);
    }
});


已更新使用
$（this）.text（）
代替
$（'.dep_按钮'）。text（）
类似

$('.dep_buttons').mouseover(function(){
    if($('.dep_buttons').text().length > 30) { //if length of text is > 30 => animate
        $(this).stop().animate({height:"100px"},150);
    }
});
$(".dep_buttons").mouseout(function(){
    if($('.dep_buttons').text().length > 30) {
       $(this).stop().animate({height:"30px"},150);
    }
});

$('.dep_buttons').mouseover(function () {
    //// $(this).text()
    if ($(this).text().length > 30) { //if length of text is > 30 => animate
        $(this).stop().animate({
            height: "100px"
        }, 150);
    }
});
$(".dep_buttons").mouseout(function () {
    if ($(this).text().length > 30) {// $(this).text()
        $(this).stop().animate({
            height: "30px"
        }, 150);
    }
});

HTML

<div class="comment more">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vestibulum laoreet, nunc eget laoreet sagittis,
    quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
    Duis eget nisl orci. Aliquam mattis purus non mauris
    blandit id luctus felis convallis.
    Integer varius egestas vestibulum.
    Nullam a dolor arcu, ac tempor elit. Donec.
</div>
<div class="comment more">
    Duis nisl nibh, egestas at fermentum at, viverra et purus.
    Maecenas lobortis odio id sapien facilisis elementum.
    Curabitur et magna justo, et gravida augue.
    Sed tristique pellentesque arcu quis tempor.
</div>
<div class="comment more">
    consectetur adipiscing elit. Proin blandit nunc sed sem dictum id feugiat quam blandit.
    Donec nec sem sed arcu interdum commodo ac ac diam. Donec consequat semper rutrum.
    Vestibulum et mauris elit. Vestibulum mauris lacus, ultricies.
</div>

JAVASCRIPT

$(document).ready(function() {
    var showChar = 100;
    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="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;
    });
});

$（文档）.ready（函数（）{
var-showChar=100；
var ellipseText=“…”；
var moretext=“更多”；
var lesstext=“less”；
$（'.more'）。每个（函数（）{
var content=$（this.html（）；
如果（content.length>showChar）{
var c=content.substr（0，showChar）；
var h=content.substr（showChar-1，content.length-showChar）；
var html=c+''+ellipseText+''+h+''；
$（this）.html（html）；
}
});
$（“.morelink”）。单击（函数（）{
if（$（this）.hasClass（“更少”））{
$（此）.removeClass（“更少”）；
$（this.html（moretext）；
}否则{
$（此）.addClass（“更少”）；
$（this.html（lesstext）；
}
$（this.parent（）.prev（）.toggle（）；
$（this.prev（）.toggle（）；
返回false；
});
});


你需要这个脚本，请添加你的脚本：）看，我尝试了这个，但没有成功：（.我需要检查标签的文本长度
如果（$（'.deep_buttons'）。text（）.length（）>30）{…我想它应该是这样的。我可以稍后再试我需要
（这个）
element在哪里添加它？我需要为meny使用此函数elements@valkharitonashvili请参阅我的
更新答案
和
演示
。