jquery - jQuery onLoad 问题

Question

你能解释一下为什么这个片段在这里有效而在这里无效吗？

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