javascript - 从 css 类动画显示/隐藏

Question

我是 JavaScript 和 jQuery 的新手，所以请多多关照。我正在尝试根据是否具有某个类来为多个 div 的显示/隐藏设置动画。

基本上，我正在为摄影师创建一个网站，并在顶部有一个带有过滤器列表的投资组合部分，每个 div 都有一个“投资组合元素”类以及它所在的所有类别的附加类，所以家庭/婚礼/ child /情侣。任何图像都可以有多个类。

我想要做的是点击家庭链接，它会隐藏任何没有家庭类的东西。如果我随后单击婚礼，它会关闭当前打开但没有婚礼类的所有内容，并打开当前关闭但其中包含婚礼类的所有内容。

我目前正在使用下面的代码，但这只会关闭所有内容，然后打开具有所需类的代码。另外，我不知道如何为其添加动画。

function portfolioItems(filter) {
 $(".portfolio-items").hide();
 $("."+filter).show(); }

function initEventHandlers () {
 $(".port-all").click(function () { 
    $(".portfolio-items").show();   
    return false;
 })
 $(".port-wedding").click(function () {
portfolioItems("wedding");
return false;
 })
 $(".port-family").click(function () {
portfolioItems("family");
return false;
 })
 $(".port-kids").click(function () {
portfolioItems("kids");
return false;
 })
 $(".port-couples").click(function () {
portfolioItems("couples");
return false;
 }) }

HTML 是...

    <div class="portfolio-container">
        <div class="portfolio-links">
            <a href="#"><img alt="All" class="port-all" src="images/port-all.png" /></a>
            <a href="#"><img alt="family" class="port-family" src="images/port-family.png" /></a>
            <a href="#"><img alt="wedding" class="port-wedding" src="images/port-wedding.png" /></a>
            <a href="#"><img alt="couples" class="port-couples" src="images/port-couples.png" /></a>
            <a href="#"><img alt="kids" class="port-kids" src="images/port-kids.png" /></a>
        </div>
        <div class="portfolio">
            <div class="portfolio-items wedding couples family"></div>
            <div class="portfolio-items kids"></div>
            <div class="portfolio-items wedding kids family"></div>
            <div class="portfolio-items couples"></div>
            <div class="portfolio-items couples kids family"></div>
            <div class="portfolio-items wedding"></div>
        </div>
    </div>

Answer 1

首先，您可以使用非选择器(look here!)来避免隐藏所有照片。只需为您的照片 block 分配两个类。像这样

    <div class="portfolio-items wedding"></div>
    <div class="portfolio-items family"></div>
    <div class="portfolio-items kids"></div>

然后你可以用这种方式重写你的portfolioItems函数

    function portfolioItems(filter) {
        $(".portfolio-items:not(."+filter+")").hide();
    }

其次，您可以创建一个通用函数来隐藏某些类别，但不会多次重复相同的代码。