如何用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/