让麻烦的 JQuery 切换器真正工作

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，然后显示内容。单击另一个链接后，它会隐藏任何打开的presentation-wrappers，然后重新显示打开顺序。我想我已经掌握了如何将动画串在一起的方法，但我不知道如何在 divs 类中循环并隐藏可见的那些。

这是我在外部文件中的 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() 似乎把整个事情搞砸了！

::Addition：也许这个细节会有所帮助。出于某种原因， .each() 中的“7”函数会在任何时候任何 div 可见时不断触发。就像是一个警察，在它被召唤后否定任何发生的事情！::

Answer 1

我实际上并没有尝试过，但看起来问题出在.each() 块中 - 当您在if 语句中引用$('.presentation') 和$('.presentation-wrapper') 时，您是否期望这只是指当前的.presentation-wrapper 及其子.presentation？因为实际上，这些语句指的是页面上匹配这些选择器的 all 元素。这就是为什么"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);
    }); 
});

Fully functional example here.

但是，在没有.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();   
}

Updated jsFiddle here.