如何用jQuery创建阅读更多

Question

我需要在jQuery中创建阅读更多功能，例如，当字符长度为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

在不感兴趣的勺子喂养你的答案，我给你这些链接：

String.length，String.substr

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

Answer 3

使用JavaScrit .length函数，您可以计算您的字符串。

我没有尝试，但它可以是这样的：

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

Answer 4

你可以找到你的html element的length一样，

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

Live Demo

更新用$(this).text()代替$('.dep_buttons').text() lik E，

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

Updated Demo

Answer 5

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/