我对jQuery非常陌生，我想知道我的代码在部署到世界时是否可行，而不是在本地测试。
我有一个相当大的代码块，在（几个）其他东西之间填充一些表单元素。当我在文档就绪部分之后将此代码放入我的脚本顶部时，它不起作用。如果我将它放在脚本的底部，它确实有效。这让我有点担心当页面在服务器上时信息无法正确加载。
var headBkg = $('#header').css('background-image'); //gets the background image url
$('#header_imgURL').attr( 'value', headBkg ); //populates a form field with the url for later use
我需要知道什么才能确保我不会实现在生产服务器上不起作用的东西？我该如何计算这类事情？
$(document).ready(function() {
// Begin Modal Window //
// get the height and width of the page
var window_width = $(window).width();
var window_height = $(window).height();
//vertical and horizontal centering of modal window(s)
/*we will use each function so if we have more then 1
modal window we center them all*/
$('.modal_window').each(function(){
//get the height and width of the modal
var modal_height = $(this).outerHeight();
var modal_width = $(this).outerWidth();
//calculate top and left offset needed for centering
var top = (window_height-modal_height)/2;
var left = (window_width-modal_width)/2;
//apply new top and left css values
$(this).css({'top' : top , 'left' : left });
});
$('.activate_modal').click(function(){
//get the id of the modal window stored in the name of the activating element
var modal_id = [$(this).attr('name'), $(this).attr('id')];
//var
// This is the original working code // var modal_id = $(this).attr('name');
//alert($(this).attr('id'));
//var theform = $(this).attr('id');
//use the function to show it
show_modal(modal_id);
});
$('#cancel').click(function(){
//use the function to close it
close_modal();
});
$('.close_modal').click(function(){
//use the function to close it
close_modal();
});
//});
//THE FUNCTIONS
function close_modal(){
//hide the mask
$('#mask').fadeOut(500);
//hide modal window(s)
$('.modal_window').fadeOut(500);
}
function show_modal(modal_id){
//set display to block and opacity to 0 so we can use fadeTo
$('#mask').css({ 'display' : 'block', opacity : 0});
//fade in the mask to opacity 0.8
$('#mask').fadeTo(500,0.7);
//show the modal window
$('#'+modal_id[0]).fadeIn(500);
// Use this if statement to dertermine whether to serve up the upload or the other script
if ( modal_id[1] == "backer")
{
var jForm = $( "#uploadform" );
jForm.submit(function( objEvent ){
var jThis = $( this );
var strName = ("uploader" + (new Date()).getTime());
var jFrame = $( "<iframe name=\"" + strName + "\" src=\"about:blank\" />" );
jFrame.css( "display", "none" );
jFrame.load(function( objEvent ){
var objUploadBody = window.frames[ strName ].document.getElementsByTagName( "body" )[ 0 ];
var jBody = $( objUploadBody );
var objData = eval( "(" + jBody.html() + ")" )
var thumb = ('thumbnails/' + eval(jBody.html()));
var title = $("#image_title").val();
//Populates the title hidden field and
//will serve as a string for the naming convention
var alt = $("#image_alt").val();
// alt text could be the same as the title possibly...
// ----------- //
//Put an if statement to set the elments that need the preview image
$("#header").css("background", "url(" + thumb + ") no-repeat center");
$("#preview").attr("src", thumb);
$("#thebackgroundimage").attr("value", thumb);
$("#theimagetitle").attr("value", title );
// ----------- //
setTimeout(function(){
jFrame.remove();
},100);
});
$( "body:first" ).append( jFrame );
jThis
.attr( "action", "upload_act_single.cfm" )
.attr( "method", "post" )
.attr( "enctype", "multipart/form-data" )
.attr( "encoding", "multipart/form-data" )
.attr( "target", strName );
});
// End Image Upload //
// In the future this is poulated with the data from the ColdFusion query
$('#preview').attr("src", "images/cfr_footwear_header_bkg.jpg");
}
}
// END of the Modal Window script //
// Replace the background image on the header //
// write this code when the cf query is ready to go //
//<!---$("#header").css("background-image", "url(<cfoutput>#headerbg#</cfoutput>) no-repeat center"); --->//
$("#header").css("background", "url(images/cfr_footwear_header_bkg.jpg) no-repeat center");
//jQuery scroller for the FarmNews on the index page //
$(function() {
$(".farmnews").jCarouselLite({
vertical: true,
visible: 4,
auto:2500,
speed:400,
hoverPause:true
});
});
// jQuery scroller for the mid-page specials //
$(function() {
$(".slideshow").jCarouselLite({
vertical: false,
visible: 1,
auto:4500,
speed:1000,
easing:"easeinout",
hoverPause:true
});
});
// This is to replace text in the input fields //
$('.textbox').click(function() {
if (this.value == this.defaultValue) {
this.value = '';}
});
$('.textbox').blur(function() {
if (this.value == '') {
this.value = this.defaultValue;}
});
var headBkg = $('#header').css('background-image');
var win1_img = [$('#window_one img').attr('src'), $('#window_one img').attr('title'), $('#window_one img').attr('alt') ]
$('#header_imgURL').attr( 'value', headBkg );
$('#win1_imgURL').attr('value', win1_img[0] );
$('#win1_imgTitle').attr('value', win1_img[1]);
$('#win1_imgAlt').attr('value', win1_img[2]);
});
整个shebang！它仍处于开发阶段，所以请在一些地方忽略我看似毫无意义的评论。
答案 0 :(得分：3)
在$(document).ready(function() { ... });代码之后将脚本放在文件顶部时，听起来像是在DOM中存在元素之前执行脚本。
为什么不将您的代码置于$(document).ready(function() { ... });之上？
您可以使用 jsbin
进行测试以查看它是否有效答案 1 :(得分：1)
JavaScript代码在浏览器读取后立即执行。如果您将代码放在页面的开头，JavaScript将引用尚未出现的元素。
解决方案是仅在文档完全处理后执行代码。这样做的jQuery习惯是将代码放在
中$(document).ready(function() {
// your code goes here
});
或其简写
$(function() {
// your code goes here
});
有关更多详细信息，请参阅此精彩教程： http://www.rebeccamurphey.com/jqfundamentals/#N206EC
答案 2 :(得分：0)
读取css属性时是否加载了foobar元素？也许如果我们看到整个脚本，我们可以帮助您