Question

我需要在容器div中隐藏类.panel的所有div。然后在隐藏之后，有选择地取消隐藏一些.panel div。我尝试在hide（）上使用回调，但回调会针对隐藏的每个元素运行。在某些情况下，我会在几乎无限或长时间运行的循环中结束，因为相同的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;
    }
}

Answer 1

我会使用承诺：

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

示例：https://jsfiddle.net/jjh65h2y/

Answer 2

您可以修改hide回调以检查隐藏的元素是否是最后一个，然后在该部分中进行回调，就像这样......

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

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

});

Answer 3

给出类似（例子）的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/

隐藏几个div并且仅在隐藏之后，然后运行回调函数

3 个答案: