的jQuery的onLoad問題

Question

你能解釋我爲什麼here這個片段的作品和here不？

$('#about, #subscribe, #contact').hide(); 

$('.home').click(function() { 
    var id = $(this).html().toLowerCase(); 
    var $content = $('#' + id + ':not(:visible)'); 
    if ($('.current').length === 0) { 
     showContent($content) 
    } 
    else { 
     $('.current').fadeOut(600, function() { 
      showContent($content) 
     }); 
    } 
}); 

function showContent(content) { 
    content.fadeIn(600); 
    $('.current').removeClass('current'); 
    content.addClass('current'); 
} 

我把完全相同的代碼存在於小提琴..

Answer 1

總結你的代碼：

$(document).ready(function(){ 
    // your code here 
}); 

這意味着一旦DOM已經初始化代碼將只運行。現在，您的代碼將在DOM準備好被操縱之前運行，這將導致您遇到的問題。

在小提琴中，代碼自動在加載時運行（請參閱您鏈接到的小提琴中的onLoad框）。

讀到它在這裏更詳細：http://api.jquery.com/ready/

Answer 2

這是因爲你喜歡你的小提琴規定不是在包裝中$(window).load({});代碼。

$(window).load(function() { 
     $('#about, #subscribe, #contact').hide(); 

     $('.home').click(function() { 
     var id = $(this).html().toLowerCase(); 
     var $content = $('#' + id + ':not(:visible)'); 
     if ($('.current').length === 0) { 
      showContent($content) 
     } 
     else { 
      $('.current').fadeOut(600, function() { 
       showContent($content) 
      }); 
     } 
    }); 

    function showContent(content) { 
     content.fadeIn(600); 
     $('.current').removeClass('current'); 
     content.addClass('current'); 
    } 
    });