javascript - 整理并减少 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);

如您所见，我多次重复相同的 Action ，只是更改目标以制作事件幻灯片。

我尝试过减少代码:

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');
});

因此您只需为所有元素使用“nav-level”类，并通过在(自定义)数据属性“data-level”中使用不同的值来区分它们。