优化 jquery 代码以制作动画动作答案

【问题标题】：optimizing jquery code for animating actions优化 jquery 代码以制作动画动作
【发布时间】：2014-07-20 16:26:45
【问题描述】：

我在 jquery 中迈出了第一步，并且我已经编写了我的第一段用于动画图片库的代码。问题是：

我有一些封面图片和相关的内容 div，它们是隐藏的（高度：0；）。
每点击一张封面图片，相关的 div 就会打开（更改高度值）。
如果相关的 div 已经打开，则关闭。如果打开了另一个相关的 div，它会关闭并打开正确的 div。
如果单击“关闭”按钮，则会关闭当前打开的 div。

代码运行良好，但我找不到可以只放置一次的语法。现在的方式是，我必须为每个新的“封面图片/内容 div”（g1/lg1 g2/lg2 g3/lg3 - 在示例中）重复脚本，指定选择器。

我怎样才能让它工作，只为所有封面图片和相关内容 div 指定一对选择器？

代码如下：(http://jsfiddle.net/samuelleal/9PL3S/3/)

$(function () {

    $('.close').click(function () {
        if ($(this).parent().height() > 0) {
            $(this).parent().removeClass('open').animate({
                height: "0px"
            }, 500);
        } else {}
    });

    $('.lg1').click(function () {
        if ($('.g1').height() > 0) {
            $('.g1').removeClass('open').animate({
                height: "0px"
            }, 500);
        } else {
            $('.gallery:not(.g1)').removeClass('open').animate({
                height: "0px"
            }, 500, function () {
                $('.g1').addClass('open').animate({
                    height: "80px"
                }, 500);
            });
        }
    });

    $('.lg2').click(function () {
        if ($('.g2').height() > 0) {
            $('.g2').removeClass('open').animate({
                height: "0px"
            }, 500);
        } else {
            $('.gallery:not(.g2)').removeClass('open').animate({
                height: "0px"
            }, 500, function () {
                $('.g2').addClass('open').animate({
                    height: "80px"
                }, 500);
            });
        }
    });

    $('.lg3').click(function () {
        if ($('.g3').height() > 0) {
            $('.g3').removeClass('open').animate({
                height: "0px"
            }, 500);
        } else {
            $('.gallery:not(.g3)').removeClass('open').animate({
                height: "0px"
            }, 500, function () {
                $('.g3').addClass('open').animate({
                    height: "80px"
                }, 500);
            });
        }
    });

});

HTML

<body id="body">
<div id="strip" class="f4">
    <ul>
        <li>
            <div class="lg1 pics orange" />
        </li>
        <li>
            <div class="lg2 pics red" />
        </li>
        <li>
            <div class="lg3 pics green" />
        </li>
    </ul>
    <div class="gallery g1">
        <div class="close blue">close</div>
        <ul>
            <li>
                <div class="pics orange"></div>
            </li>
            <li>
                <div class="pics orange"></div>
            </li>
            <li>
                <div class="pics orange"></div>
            </li>
            <li>
                <div class="pics orange"></div>
            </li>
            <li>
                <div class="pics orange"></div>
            </li>
        </ul>
    </div>
    <div class="gallery g2">
        <div class="close blue">close</div>
        <ul>
            <li>
                <div class="pics red"></div>
            </li>
            <li>
                <div class="pics red"></div>
            </li>
            <li>
                <div class="pics red"></div>
            </li>
            <li>
                <div class="pics red"></div>
            </li>
            <li>
                <div class="pics red"></div>
            </li>
        </ul>
    </div>
    <div class="gallery g3">
        <div class="close blue">close</div>
        <ul>
            <li>
                <div class="pics green"></div>
            </li>
            <li>
                <div class="pics green"></div>
            </li>
            <li>
                <div class="pics green"></div>
            </li>
            <li>
                <div class="pics green"></div>
            </li>
            <li>
                <div class="pics green"></div>
            </li>
        </ul>
    </div>
</div>

CSS

.pics, li {
    width: 50px;
    height: 50px;
    display: inline-block;
    margin: 0 10px;
    cursor: pointer;
}
.green {
    background-color: darkgreen;
}
.blue {
    background-color: darkblue;
}
.red {
    background-color: darkred;
}
.orange {
    background-color: darkorange;
}
.close {
    float: left;
    height: 20px;
    position: relative;
    width: auto;
    padding: 0 5px;
    color: white;
    cursor: pointer;
}
#strip > ul {
    width: 100%;
    height: 80px;
    display: block;
}
.gallery {
    height: 0;
    width: 100%;
    overflow: hidden;
    background-color: gray;
}
ul li {
    list-style: none;
}

【问题讨论】：

不要在多个元素上使用相同的 ID。
你说的是#gallery div吗？我将它用于样式，确实可以为类更改它。然而，它并没有解决问题，因为 javascript 仍然需要在多个实例中引用每个画廊。
是的，画廊 divs。更改类并使您的 HTML 有效。

标签： javascript jquery optimization jquery-animate simplify

【解决方案1】：

我同意 techfoobar 的观点，你不应该在不同的元素上有多个相同的 ID，所以我修改了我的答案（你可以在技术上用类来做，我想......） .在将 ID 更改为类并将类更改为 Gallery 类元素的 ID（并修改相应的 CSS）之后，您可以为每个彩色方块赋予一个“画廊”属性（以指向它打开的画廊）并附加点击所有彩色方块的事件处理程序，它查看该画廊属性以查找要显示的方块：

$(document).on('click','#strip ul li div',function(){
    var gallery = $(this).attr('gallery');
    if ($('#'+gallery).height() > 0) {
        $('#'+gallery).removeClass('open').animate({
            height: "0px"
        }, 500);
    } else {
        $('.gallery:not(#'+gallery+')').removeClass('open').animate({
            height: "0px"
        }, 500, function () {
            $('#'+gallery).addClass('open').animate({
                height: "80px"
            }, 500);
        });
    }
  });

在这里查看：http://jsfiddle.net/Qv9KR/1/

【讨论】：

我正要发布同样的东西（除了使用自定义画廊属性，这是一个不错的方法）。只有我建议的更改是缓存画廊元素，例如var galleryElement = $('#'+gallery);，而不是使用'.gallery:not()，而是说galleryElement.siblings().removeClass('open')，这样更干净，我相信更有效率。（不过，您必须将 .gallery 元素包装在一个仅属于它们的包含 div 中，以便 .siblings 工作。）
这正是我想要的。谢谢@mark.hch 和@ryan-mitchell！