整理和減少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 。

更多詳情：

• 調用函數和引用函數之間的區別？
• 什么時候使用括號，什么時候不使用？