Question

我需要在jQuery中创建read more函数，例如当字符长度为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);
    });
});

Answer 1

if($('your class').text().length() > 30) {});

你需要这个脚本

Answer 2

您可以找到length的{{1}}个，

html element

Live Demo

已更新使用$('.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); } });代替$(this).text()赞，

$('.dep_buttons').text()

Updated Demo

Answer 3

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>

CSS

a {
    color: #0254EB
}
a:visited {
    color: #0254EB
}
a.morelink {
    text-decoration:none;
    outline: none;
}
.morecontent span {
    display: none;
}
.comment {
    width: 400px;
    background-color: #f0f0f0;
    margin: 10px;
}

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;
    });
});

http://viralpatel.net/blogs/demo/jquery/show-more-link-shortened-content/

Answer 4

为了不用勺子给你答案，我会给你这些链接：

String.length，String.substr

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

Answer 5

使用JavaScript .length功能，您可以计算字符串。

我没试过，但看起来像这样：

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

如何使用jquery创建更多阅读

5 个答案: