javascript - 为什么将 Javascript 代码从 html 移动到外部 js 文件后无法工作？

Question

我的 Javascript 代码在我的 HTML 中运行良好。当我将它移到我的 main.js 时，它突然停止工作。

免责声明：我对 jQuery 和 Javascript 很陌生，如果真的很明显，我很抱歉。

var infoVisible = false,
buyVisible = false;

function closeAllProductInfo() {
    $('#info').css({visibility: 'hidden'});
    $('#buy').css({visibility: 'hidden'});
    $('#options.info a').removeClass('active');
    $('#options.buy a').removeClass('active');
    infoVisible = false;
    buyVisible = false;
    imagesVisible = false;
}

function openProductInfo() {
    closeAllProductInfo();
    $('#info').css({visibility: 'visible', opacity: 0});
    $('#info').animate({opacity: 1}, 250);
    $('#options.info a').addClass('active');
    infoVisible = true;
}

function openProductBuy() {
    closeAllProductInfo();
    $('#buy').css({visibility: 'visible', opacity: 0});
    $('#buy').animate({opacity: 1}, 250);
    $('#options.buy a').addClass('active');
    buyVisible = true;
}

$('.info').click(function() {
    if (infoVisible) { 
        $('#info').animate({opacity: 0}, 250, function() {  
            closeAllProductInfo(); 
        }); 
    } else { 
        openProductInfo(); 
    }

    return false;
});

$('.buy').click(function() {
    if (!$(this).hasClass('in-active')) {
        if (buyVisible) { 
            $('#buy').animate({opacity: 0}, 250, function() { 
                closeAllProductInfo(); 
            }); 
        } 
        else { 
            openProductBuy(); 
        }
    }

    return false;
});

$('#info').click(function() {
    if (infoVisible) { 
        $('#info').animate({opacity:0}, 250, function() { 
            closeAllProductInfo(); 
        }); 
    }
});

$('#buy').click(function() {
    if (!$(this).hasClass('in-active')) {
        if (buyVisible) { 
            $('#buy').animate({opacity:0}, 250, function() { 
                closeAllProductInfo(); 
            }); 
        }
    }
});

Answer 1

可能是因为它曾经在加载文档后执行，但现在它在加载脚本时执行。您是在 HTML 文件的末尾还是开头加载 main.js？在文档准备好后使用它来执行它：

jQuery(document).ready(function($) {
  // Code using $ as usual goes here.
});

Answer 2

尝试将所有代码包装在：

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