Question

我正在尝试构建一个Parallax Scrolling类型的网站（隐藏和取消隐藏多个＆＃34;幻灯片＆＃34;在单个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()吗？

编辑：

以下是当前的工作代码，上面的第一个代码：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');
});

所以你只需要使用班级＆＃34; nav-level＆＃34;对于所有元素，并通过在（自定义）数据属性＆＃34;数据级＆＃34;中使用不同的值来区分它们。

Answer 2

回答“为什么”的问题：

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

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

请注意与以下内容的差异：

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

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

在点击通话fade上调用匿名函数。

进一步详情：

整理并减少JQuery代码

2 个答案: