整理和减少JQuery代码

Question

我正在尝试建立一个视差滚动类型的网站（在单个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功能。

有人可以解释为什么函数fade在$(document).ready上运行并且不等待.click()吗？

编辑：

这是当前的工作代码，即上面的第一个代码： http : //jsfiddle.net/m924B/1/ （注意：不知道如何加载图像，但是如果单击较小的丢失图像，则会转到登陆页面。）

这是该代码的第二次尝试： http : //jsfiddle.net/m924B/2/

Answer 1

与您的html看起来像这样：

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

您可以使用HTML5数据属性来构建jQuery选择器字符串：

$('.nav-level').click(function() {
    $('.active-slide').fadeOut(0).removeClass('active-slide');
    $('.level' + $(this).data("level")).fadeIn(1200).addClass('active-slide');
});

因此，您只需对所有元素使用“导航级别”类，并通过在（自定义）数据属性“数据级别”中使用不同的值来区分它们。

Answer 2

要回答“为什么”问题：

因为您在click处理程序分配中运行 fade 。

将()放在函数引用之后会调用该函数 。

请注意与以下内容的区别：

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

这样会传递一个不会立即运行的函数-对匿名函数的引用。

在点击呼叫上调用匿名函数会fade 。

更多详情：

• 调用函数和引用函数之间的区别？
• 什么时候使用括号，什么时候不使用？