jQuery 功能未按预期执行

Question

我刚刚创建了一个 fadeIn/fadeOut 菜单，其中有一个活动的 class。请参阅下面的代码：

jQuery(document).ready(function ($) {


var navItem1 = $('#exemption-nav-1'),
    navItem2 = $('#exemption-nav-2'),
    navItem3 = $('#exemption-nav-3'),
    displayItem1 = $('#exemption-item-1'),
    displayItem2 = $('#exemption-item-2'),
    displayItem3 = $('#exemption-item-3');


function fadeOutAll() {
    (displayItem1).stop().fadeOut('slow', function () {
        navItem1.removeClass('exemption-active');
        (displayItem2).stop().fadeOut('slow', function () {
            navItem2.removeClass('exemption-active');
            (displayItem3).stop().fadeOut('slow', function () {
                navItem3.removeClass('exemption-active');
            });
        });
    });
}

navItem1.click(function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    fadeOutAll(function () {
        navItem1.addClass('exemption-active');
        displayItem1.stop().fadeIn();
    });
});


navItem2.click(function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    fadeOutAll(function () {
        navItem2.addClass('exemption-active');
        displayItem2.stop().fadeIn();
    });
});


navItem3.click(function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    fadeOutAll(function () {
        navItem3.addClass('exemption-active');
        displayItem3.stop().fadeIn();
    });
});
});

所以我在不调用 "fadeOutAll" 函数的情况下使它工作，但是当我实际创建该函数时，它全部中断了。有什么想法吗？

所以总而言之，我希望它能在活动显示的选项卡之间切换。请参阅此 JSFIDDLE 如您所见，这是可行的，但我只是想通过使用函数来验证代码。这可能吗？

Answer 1

基本上你的代码问题归结为：

function doThis() {
  // do nothing
}

$("#clickme").click(function() {
  doThis(function() {
    alert("clicked");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='button' id='clickme'>click</button>

什么都不做。

您需要告诉 fadeOutAll（上面的 doThis）它将接收一个 anonymous/inline 函数以及如何处理它：

function doThis(todo) {
  todo();
}

$("#clickme").click(function() {
  doThis(function() {
    alert("clicked");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='button' id='clickme'>click</button>

jQuery 功能未按预期执行

jQuery Function not doing what is expected

html

css

jquery

fade