Javascript 整理并减少JQuery代码

我正在尝试建立一个视差滚动类型的网站（在一个html页面上隐藏和取消隐藏多个“幻灯片”）

我有基本的jQuery代码设置，其工作原理如下：

var main = function() {
$('.to-the-articles').click(function() {
    var currentSlide = $('.active-slide');
    var nextSlide = $('.active-slide').next();

    currentSlide.fadeOut(1200).removeClass('active-slide');
    nextSlide.fadeIn(1200).addClass('active-slide');
});

$('.nav-level1').click(function() {
    var currentSlide = $('.active-slide');
    var nextSlide = $('.active-slide').next();

    currentSlide.fadeOut(0).removeClass('active-slide');
    nextSlide.fadeIn(1200).addClass('active-slide');
});

$('.nav-level2').click(function() {
    $('.active-slide').fadeOut(0).removeClass('active-slide');
    $('.level2').fadeIn(1200).addClass('active-slide');
});

$('.nav-level3').click(function() {
    $('.active-slide').fadeOut(0).removeClass('active-slide');
    $('.level3').fadeIn(1200).addClass('active-slide');
});

$('.nav-level4').click(function() {
    $('.active-slide').fadeOut(0).removeClass('active-slide');
    $('.level4').fadeIn(1200).addClass('active-slide');
});

$('.back-home').click(function() {
    $('.active-slide').fadeOut(0).removeClass('active-slide');
    $('.home').fadeIn(1200).addClass('active-slide');
});
};

$(document).ready(main);

正如您所见，我多次重复相同的操作，只是更改目标以制作活动幻灯片

我尝试过减少代码：

var fade = function(target) {
    var nextSlide = $(target);
    $('.active-slide').fadeOut(0).removeClass('active-slide');
    nextSlide.fadeIn(1200).addClass('active-slide');
};

var main = function() {
    $('.to-the-articles').click(fade('.home'));

    $('.nav-level1').click(fade('.level1'));
    $('.nav-level2').click(fade('.level2'));
    $('.nav-level3').click(fade('.level3'));
    $('.nav-level4').click(fade('.level4'));

    $('.back-home').click(fade('.home'));
};

$(document).ready(main);

在这里，我尝试创建一个函数

fade

，当单击其中一个选定的类时调用该函数，但它只是在文档准备好后立即运行函数

fade

有人能解释一下为什么函数

fade

在

$（document.ready

上运行并且不等待

。click（）

编辑：

以下是当前工作代码，即上面的第一个代码： （注意：不知道如何加载图像，但如果单击较小的缺失图像，它将带您进入登录页。）

下面是代码的第二次尝试：

回答“为什么”问题：

var fade = function(target) {
    var nextSlide = $(target);
    $('.active-slide').fadeOut(0).removeClass('active-slide');
    nextSlide.fadeIn(1200).addClass('active-slide');
};

var main = function() {
    $('.to-the-articles').click(fade('.home'));

    $('.nav-level1').click(fade('.level1'));
    $('.nav-level2').click(fade('.level2'));
    $('.nav-level3').click(fade('.level3'));
    $('.nav-level4').click(fade('.level4'));

    $('.back-home').click(fade('.home'));
};

$(document).ready(main);

因为您在

单击
处理程序分配中运行
fade

将
（）
放在函数引用之后调用该函数

注意与以下内容相比的差异：

$('.nav-level1').click(function() { fade('.level1'); });

这将传递一个不会立即运行的函数，即对匿名函数的引用

在单击上调用匿名函数将调用淡入淡出<代码>

进一步详情：




回答“为什么”问题：

因为您在
单击
处理程序分配中运行
fade

将
（）
放在函数引用之后调用该函数

注意与以下内容相比的差异：

$('.nav-level1').click(function() { fade('.level1'); });

这将传递一个不会立即运行的函数，即对匿名函数的引用

在单击上调用匿名函数将调用淡入淡出<代码>

进一步详情：




您的html看起来像这样：

<div class="nav-level" data-level="1"></div>
<div class="nav-level" data-level="2"></div>
...

因此，您只需对所有元素使用“nav level”类，并通过在（自定义）数据属性“data level”中使用不同的值来区分它们。
您的html如下所示：

<div class="nav-level" data-level="1"></div>
<div class="nav-level" data-level="2"></div>
...

因此，您只需对所有元素使用类“nav level”，并通过在（自定义）数据属性“data level”中使用不同的值来区分它们。
请也提供HTML。事实上，有一个好的。也请提供HTML。事实上，拥有一张幻灯片会很好。嘿，将代码添加到JSFIDLE，正如您所看到的，我正试图单击
.nav level
，但将页面指向幻灯片
.level
。此代码是否可以执行此操作？已为您修复：。您的小提琴中也没有包含
jQuery
，而且您使用了
.click（）
函数，但没有匿名回调函数。我将其替换为更值得推荐的
.on（）
函数。嘿，将代码添加到JSFIDLE，正如您所看到的，我试图单击
.nav level
，但将页面指向幻灯片
.level
。此代码是否可以执行此操作？已为您修复：。您的小提琴中也没有包含
jQuery
，而且您使用了
.click（）
函数，但没有匿名回调函数。我用更值得推荐的
.on（）
函数替换了它。谢谢你的帮助，Dave，理解起来真的很有用！谢谢你，戴夫，理解起来真的很有用！