jQuery函数不做预期的事情

时间:2018-02-26 14:44:03

标签: jquery html css fade

我刚刚创建了一个带有活动类的fadeIn / fadeOut菜单。请参阅以下代码:

JSFiddle

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正如你所看到的那样有效,但我只是想通过一个函数来使用代码。这可能吗?

1 个答案:

答案 0 :(得分:0)

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



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>
&#13;
&#13;
&#13;

哪个......没什么。

您需要告诉fadeOutAll(上面doThis)它将接收匿名/内联函数以及如何处理它:

&#13;
&#13;
function doThis(todo) {
  todo();
}

$("#clickme").click(function() {
  doThis(function() {
    alert("clicked");
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='button' id='clickme'>click</button>
&#13;
&#13;
&#13;