让麻烦的 JQuery Switcher 真正工作起来

Question

我正在尝试自学 Jquery 效果以使我的网站充满活力。我创建了一个如下所示的练习页面：

<article><a class="front-fire" href="1"></a></article>
<article><a class="front-fire" href="2"></a></article>
<article><a class="front-fire" href="3"></a></article>

<div class="presentation-wrapper">
    <div class="load"></div>
    <div class="presentation"></div>
</div>
<div class="kill></div>

<article><a class="front-fire" href="4"></a></article>
<article><a class="front-fire" href="5"></a></article>
<article><a class="front-fire" href="6"></a></article>

<div class="presentation-wrapper">
    <div class="load"></div>
    <div class="presentation"></div>
</div>
<div class="kill></div>

它的目标是，如果我单击链接，它会展开最近的 presentation-wrapper 淡出加载 gif，加载内容，淡出 gif ，然后显示内容。单击另一个链接后，它会隐藏所有打开的演示包装器，然后重新显示打开序列。我想我已经掌握了如何将动画串在一起，但我不知道如何循环遍历 div 类并隐藏可见的动画。

这是我在外部文件中的 javascript。 #primary 附加用于我的调试目的：

$(document).ready(function() {     
$('a').click(function(e) {
    e.preventDefault();
    $('#primary').append("pressed");
    var toLoad = $(this).attr('href')+' #post-body';
    var wrap = $(this).parents().filter('article').nextUntil('.kill', '.presentation-wrapper');
    var load = $(wrap).children('.load');
    var pres = $(wrap).children('.presentation');
    var allwraps = $(".presentation-wrapper");

    $(".presentation-wrapper").each(function() {
        if ($(this).is(':visible')) {
            $('#primary').append("6");
            $('.presentation').fadeOut(3000, function() {
                $('#primary').append("7");
                $('.presentation-wrapper').slideUp(3000);
            });         
        }
    });

    switcher();


    function switcher() {       
        $(wrap).slideDown(3000, loadLoader);
        $('#primary').append("1");

        function loadLoader() {
            $(load).fadeIn(3000, loadContent);  
            $('#primary').append("2");
        }

        function loadContent() {
            $(pres).load(toLoad, hideLoader);
            $('#primary').append("3");
        }

        function hideLoader() {
            $(load).fadeOut(3000, showNewContent);
            $('#primary').append("4");
        }

        function showNewContent() {
            $(pres).fadeIn(3000);
            $('#primary').append("5");
        }
    };
  });
});

我知道这是一个大问题，也许这不是问的地方，但我一直在用头撞墙试图解决这个问题出了什么问题。它在第一次点击时有效，但是 .each() 似乎把整个事情搞砸了！

::补充：也许这个细节会有所帮助。由于某种原因，只要任何 div 随时可见，.each() 中的“7”函数就会不断触发。就像一个警察在接到电话后否认发生的任何事情！::

Answer 1

我实际上还没有尝试过这个，但看起来问题出在 .each() 块中 - 当您引用 $('.presentation') 和if 语句中的 $('.presentation-wrapper') 是否希望它仅引用当前的 .presentation-wrapper 并且它的子.presentation？因为事实上，这些语句引用了页面上与这些选择器匹配的所有元素。这就是"7" 位每次都会触发的原因。

我认为这应该做到这一点：

// hide all other presentation wrappers
$(".presentation-wrapper:visible").not(wrap[0]).each(function() {
    $('#primary').append("6");
    var otherwrap = $(this);
    // scope the selector to this element's children
    $('.presentation', otherwrap).fadeOut(3000, function() {
        $('#primary').append("7");
        otherwrap.slideUp(3000);
    }); 
});

这里有功能齐全的示例。

但是，实际上，在没有 .each() 函数的情况下执行此操作实际上更干净：

// hide all other presentation wrappers
$(".presentation-wrapper:visible .presentation")
    .not(pres)
    .fadeOut(3000, function() {
        $(this).parent().slideUp(3000);
    });

此外，我意识到，如果您尝试将内容加载到同一个中，您将需要额外的逻辑.presentation-wrapper - 在这种情况下，您只想立即隐藏子 .presentation：

// hide this immediately if it's currently visible
if (wrap.is(':visible')) {
    pres.hide();   
}

在这里更新了 jsFiddle。