隐藏几个div并且只有在全部隐藏后才运行回调函数

我需要隐藏容器div中的所有类.panel的div。然后在隐藏之后，选择性地取消隐藏几个.panel div。我尝试在hide（）上使用回调，但回调针对隐藏的每个元素运行。在某些情况下，我会在一个几乎无限或长时间的循环中结束，因为同一个div被隐藏并反复显示。隐藏几个div并且只有在全部隐藏后才运行回调函数

这并不作为第二要素的工作正在上映之前，隐藏齐全：

$("#detailsPanel").children(".panel").hide(); 
$("#membershipPanel").slideDown(); 
$("#specializationsPanel").slideDown();

如果我窝在回调后隐藏这些步骤中，回调运行，每.panel DIV那是隐藏的。

全码

这里是我的全部功能，是否可以帮助找到我的逻辑缺陷。

function goWizard(step) { 
    switch (step) { 
     case 0: 
      $("#formPanel").hide(); 
      $("#beginPanel").slideDown(); 
      $("#instructionsPanel").slideDown().children().slideDown(); 
      $("#loginPanel").slideDown().children().slideDown(); 
      break; 
     case 1: 
      $("#beginPanel").hide().children().hide(); 
      $("#stepTitle").text("Membership Category/Specialist Category :: Step 1 of 8"); 
      $("html, body").animate({ scrollTop: 0 }, "slow"); 
      $("#summaryPanel").slideDown().children().show(); 
      $("#formPanel").slideDown(); 

      var i = 0; 
      var $panels = $("#detailsPanel").children(".panel"); 
      $panels.hide(function() { 
       i++; 
       if (i == $panels.length) { 
        $("#membershipPanel").show(); 
        $("#specializationsPanel").show(); 
       } 
      }); 

      $("#startOverButton").show(); 
      $("#prevStepButton").hide(); 
      $("#nextStepButton").show(); 
      $("#startOverButton").click(function() { goWizard(0); }); 
      $("#nextStepButton").click(function() { goWizard(2); }); 
      break; 
     case 2: 
      $("#beginPanel").hide().children().hide(); 
      $("#stepTitle").text("Section Membership :: Step 2 of 8"); 
      $("html, body").animate({ scrollTop: 0 }, "slow"); 
      $("#summaryPanel").slideDown().children().show(); 
      $("#formPanel").slideDown(); 

      var i = 0; 
      var $panels = $("#detailsPanel").children(".panel"); 
      $panels.hide(function() { 
       i++; 
       if (i == $panels.length) { 
        $("#sectionsPanel").show(); 
       } 
      }); 

      $("#startOverButton").hide(); 
      $("#prevStepButton").show(); 
      $("#nextStepButton").show(); 
      $("#prevStepButton").click(function() { goWizard(1); }); 
      $("#nextStepButton").click(function() { goWizard(3); }); 
      break; 
     case 3: 
      $("#beginPanel").hide().children().hide(); 
      $("#stepTitle").text("Insurance Compliance :: Step 3 of 8"); 
      $("html, body").animate({ scrollTop: 0 }, "slow"); 
      $("#summaryPanel").slideDown().children().show(); 
      $("#formPanel").slideDown(); 

      var i = 0; 
      var $panels = $("#detailsPanel").children(".panel"); 
      $panels.hide(function() { 
       i++; 
       if (i == $panels.length) { 
        $("#insurancePanel").show(); 
       } 
      }); 

      $("#startOverButton").hide(); 
      $("#prevStepButton").show(); 
      $("#nextStepButton").show(); 
      $("#prevStepButton").click(function() { goWizard(2); }); 
      $("#nextStepButton").click(function() { goWizard(4); }); 
      break; 
     default: 
      $("#beginPanel").slideDown(); 
      $("#formPanel").hide(); 
      break; 
    } 
}

来源

2016-10-07 Connie DeCinko

'隐藏（）儿童（）隐藏（）'和'.slideDown（）儿童（）。 show（）;'没有意义 – DaniP

我会用承诺：

$.when(
    $("#detailsPanel").children(".panel").hide().promise(), 
    $("#membershipPanel").slideDown().promise(), 
    $("#specializationsPanel").slideDown().promise() 
).done(function() { 
    console.log('all done'); 
});

实施例：https://jsfiddle.net/jjh65h2y/

来源

2016-10-07 19:08:41

我更喜欢你的解决方案。在我的例子中，最初包括了诺言，但没有像您的那样整齐地完成，也没有能够测试。 +1！ – Santi

您可以修改您的hide回调，以检查是否被隐藏的元素是最后一个，然后再做回调在这部分，像这样......

var i = 0; 
var $panels = $("#detailsPanel").children(".panel"); 
$panels.hide(function() { 

    i++; 
    if(i == $panels.length) { 
     $("#membershipPanel").slideDown(); 
     $("#specializationsPanel").slideDown(); 
    } 

});

来源

2016-10-07 19:01:06 Santi

Thanks @guedes。编辑:) – Santi

这看起来好像会起作用，但是当我在我的步骤中来回移动（使用这个基本的向导形式）时，某些东西仍然是不正确的。例如，membershipPanel在步骤1中显示，转到步骤2然后转到步骤2，然后转到步骤1的面板。 –

我觉得您描述的问题与我提供的代码段无关，听起来更像是您如何调用方法。上面的代码片段只是隐藏所有面板，然后显示特定目标的两个面板。鉴于你现在只提供了完整的范围，我不确定我仍然会建议我的解决方案。 – Santi

给定一个DOM结构（例如）：

<div class="panel">text</div> 
<div class="panel unhide">text</div> 
<div class="panel">text</div> 
<div class="panel unhide">text</div> 
<div class="panel">text</div>

您可以隐藏然后用jQuery以两种方式取消隐藏元素。

或者：

$.when($('.panel').animate({opacity: 0}, 500)).then(function() { 
    $('.unhide').animate({opacity: 1}, 500); 
});

或者：。

$('.panel').animate({opacity: 0}, 500).promise().done(function() { 
    $('.unhide').animate({opacity: 1}, 500); 
});

https://jsfiddle.net/q2mctsz6/

来源

2016-10-07 19:15:07 taseenb

隐藏几个div并且只有在全部隐藏后才运行回调函数

回答

相关问题