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-wrapper，然后重新显示打开顺序。我想我已经掌握了如何将动画串联在一起，但我无法弄清楚如何在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')中引用$('.presentation-wrapper')和if时声明，您是否希望此仅引用当前的.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);
    }); 
});

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.

制作麻烦的JQuery切换器实际工作

1 个答案: