整理和减少JQuery代码

Tidy up and reduce JQuery code

本文关键字：JQuery 代码      更新时间：2023-09-26

我正在尝试建立一个视差滚动类型的网站(隐藏和取消隐藏多个"幻灯片"在一个单一的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/

你的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"中使用不同的值来区分它们。

回答"为什么"的问题:

因为您在click处理程序赋值中运行 fade。

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

注意与下面语句的区别:

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

这传递了一个不会立即运行的函数& & & &;一个匿名函数的引用。

在click上调用匿名函数会调用fade。

更多细节:

  • 调用函数和引用函数的区别?
  • 我什么时候用括号，什么时候不用?
相关文章：