如何製作div的全高度？

Question

我有三個div，我有功能，當我點擊按鈕時顯示它們的全部內容。 但我認爲這個函數太複雜了，我想要沒有那麼多if語句的東西。

如果我有10個div，這個函數會太長，如何縮短它？

$(document).ready(function() { 
var h1 = $(".pt1").height(), h2 = $(".pt2").height(), h3 = $(".pt3").height(); 
$(".post-text").height("72px"); 
var read = $(".post-read"); 

read.click(function() { 
    if ($(this).html() === 'Read more') { 
     $(this).html("Show less"); 
     if ($(this).prev().attr('class') == "post-text pt1") { 
      $(this).prev().animate({ 
       height : h1 
      }, 'slow'); 
     } else if ($(this).prev().attr('class') == "post-text pt2") { 
      $(this).prev().animate({ 
       height : h2 
      }, 'slow'); 
     } else { 
      $(this).prev().animate({ 
       height : h3 
      }, 'slow'); 
     } 
    } else { 
     $(this).html("Read more"); 
     $(this).prev().animate({ 
      height : 72 
     }, 'slow'); 
    } 
}); 
}); 

HTML：

<div id="tabs-1"> 
       <div class="post"> 
        <div class="post-img"> 
         <img alt="" src="img/post-pic.png"> 
        </div> 
        <div class="post-text pt1">Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
         Pellentesque habitant morbi tristique senectus et netus et male- suada fames Pellentesque habitant 
         morbi tristique senectus et netus et malesuada fames Pellentesque habitant morbi tristique senectus et 
         netus et male- suada fames Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
         Pellentesque habitant morbi tristique senectus et netus et male- suada fames Pellentesque habitant 
         morbi tristique senectus et netus et malesuada fames Pellentesque habitant morbi tristique senectus et 
         netus et male- suada fames</div> 

        <div class="post-read">Read more</div> 
        <div class="clear"></div> 
       </div> 
       <div class="post"> 
        <div class="post-img"> 
         <img alt="" src="img/post-pic.png"> 
        </div> 
        <div class="post-text pt2">Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
         Pellentesque habitant morbi tristique senectus et netus et male- suada fames Pellentesque habitant 
         morbi tristique senectus et netus et malesuada fames Pellentesque habitant morbi tristique senectus et 
         netus et male- suada fames Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
         Pellentesque habitant morbi tristique senectus et netus et male- suada fames Pellentesque habitant 
         morbi tristique senectus et netus et malesuada fames Pellentesque habitant morbi tristique senectus et 
         netus et male- suada fames Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
         Pellentesque habitant morbi tristique senectus et netus et male- suada fames</div> 
        <div class="post-read">Read more</div> 
        <div class="clear"></div> 
       </div> 
       <div class="post"> 
        <div class="post-img"> 
         <img alt="" src="img/post-pic.png"> 
        </div> 
        <div class="post-text pt3">Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
         Pellentesque habitant morbi tristique senectus et netus et male- suada fames Pellentesque habitant 
         morbi tristiquemorbi tristique senectus et netus.</div> 
        <div class="post-read">Read more</div> 
        <div class="clear"></div> 
       </div> 
      </div> 

CSS：

.post {clear: both;width: 595px;padding-bottom: 30px;} 
.post-img {width: 122px;background-color: #f8f6f1;box-shadow: 0px 0px 5px 1px #a09e99;float: left; } 
.post-text {float: left;width: 457px; overflow:hidden;padding-left: 16px;} 
.post-read {float: right;background: url(img/arrow.png) no-repeat right center transparent;padding-right: 22px;margin-right: 12px;} 

的jsfiddle：link

Answer 1

這是當你應該寫的jQuery插件的情況。這很容易：

(function ($) { 
    $.fn.readMore = function() { 
     return this.each(function() { 
      var h = $(this).height(); 
      $(this).height("72px"); 
      $(this).next().click(function() { 
       if ($(this).html() === 'Read more') { 
        $(this).html("Show less"); 
        if ($(this).prev().hasClass('post-text')) { 
         $(this).prev().animate({ 
          height: h 
         }, 'slow'); 
        } 
       } 
       else { 
        $(this).html("Read more"); 
        $(this).prev().animate({ 
         height: 72 
        }, 'slow'); 
       } 
      }); 
     }); 
    }; 
})(jQuery); 

$(function() { 
    $('.post-text').readMore(); 
}); 

http://jsfiddle.net/dfsq/S9KEz/1/

這是一個scetch，你應該改進它。例如，你不應該使用像$(this).html() === 'Read more'這樣的比較 - 如果你改變了文本，你的代碼將停止工作。

Answer 2

我覺得這可能是工作：

read.click(function() 
{ 
    if ($(this).html() === 'Read more') 
    { 
     $(this).html("Show less"); 

     var thisClass = $(this).prev().attr('class'); 
     var thisId = thisClass.replace('post-text ', ''); 
     var thisHeight = $('.' + thisId).height(); 

     $(this).prev().animate(
     { 
      height : thisHeight 
     }, 'slow'); 
    } 
    else 
    { 
     $(this).html("Read more"); 
     $(this).prev().animate({ 
      height : 72 
     }, 'slow'); 
    } 
});