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/

这是一个方面，你应该改进它。例如，您不应该使用像$(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');
   }
});

如何动画div的全高？

2 个答案: