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

jQuery onLoad问题

2 个答案: