我是＆＃34;新＆＃34;到JavaScript，为网站制作我的第一个图像和媒体滑块。 我在网上搜索了答案，在SO中搜索了答案，但它们对我没用。
我的最后一个重大改变是将我的剧本分为两部分。一个在MYClassA之外，一个在里面。我希望用户能够通过HTML中的按钮调用函数。为了实现此功能，此功能必须是全局的，不能位于$(document).ready()内。我对吗？
在我分割我的脚本之前，所有内容都在$(document).ready()区域内，并且它正常工作。但是因为我无法通过按钮调用该功能。
但是现在我的$(document).ready()里面的部分，它必须在页面加载时构建滑块，而不是等待它。我的所有$(document).ready()都产生错误：＆＃34;无法设置属性＆＃39;样式＆＃39; null。＆＃34;因此滑块不会构建。
这告诉我getElementById()返回＆＃34; null＆＃34;即使它在getElementById()内。
HTML：
$(document).ready()JavaScript的：
<!-- very content -->
<link href="...css" />
<script src="...js" />
<div id="slider"></div>
<!-- more content -->
<div id="changeContent"></div>
<!-- more content -->
</body>
</html>
使用这种HTML结构它无法正常工作。 当我将脚本包含放在HTML的末尾时，它可以正常工作，并且将构建滑块。
那么为什么我的 // Configuration
var slidersParentId = 'imslider';
var slideShowTitle = '';
var thumbnailWidth = 20;
var slidesWidth = 281.25;
var slidesHeight = 144.5625;
var currentSlideWidth = 500;
var currentSlideHeight = 257;
var nextSlideWidth = 375;
var nextSlideHeight = 192.75;
var prevSlideWidth = nextSlideWidth;
var prevSlideHeight = nextSlideHeight;
var resizeDifference = currentSlideWidth - nextSlideWidth;
var slidesMargin = 20;
var animationDistance = slidesWidth + slidesMargin;
var animationSpeed = 2000;
var intervalSpeed = 7000;
var contentDiv = "descriptif_site_spip";
// Variables from slides.json
var numberOfSlides;
var jsonSlides = {};
var bgImgUrl;
// Cache the DOM
var $slideShow = $('#'+slidersParentId);
var $slideInner;
var $slides;
var $slideNav;
var $navThumb;
var $thumb;
var $hovers;
var $content = document.getElementById(contentDiv);
// Other global Variables
var interval;
var currentSlide = 1;
var nextSlide = currentSlide + 1;
var prevSlide = currentSlide - 1;
var lastSlide = currentSlide;
var lastCurrentDif;
var lastNextSlide = lastSlide + 1;
var lastPrevSlide = lastSlide - 1;
var thumbImgs = [];
var navTo;
var interval;
var i;
// Global Variables for dragging
var dragStartPosition;
var dragStopPosition;
var draggedDistance;
var slidesDragged;
var posSlidesDragged;
var negSlidesDragged;
// IRIS-MEDIA-MODUS ?!
var iris_mode = 1;
//global functions...
//global warming...
$(document).ready(function(){
$.ajax({}
//getting some json...
});
// Building the slideshow windows
if (slideShowTitle !== 0) {
$slideShow.append('<h2 class="slideShowTitle">'+slideShowTitle+'</h2>');
}
$slideShow.append('<div id="outerWindow"><div id="innerWindowPositioner"<div id="innerWindow"></div></div</div>');
$slideInner = $slideShow.find('#innerWindow');
$slideInner.css({'width': numberOfSlides*slidesWidth+numberOfSlides*slidesMargin*currentSlideWidth*3});
// Building the slides & hovers
for (i=1; i<=numberOfSlides; i++) {
var idSlides = "slide_Nr"+i;
alert(idSlides);
var idHover = "hover_Nr"+i;
var j = i-1;
bgImgUrl = "url('" +jsonSlides[j].mediaUrl+ "')";
var title = jsonSlides[j].title;
var artUrl = jsonSlides[j].articleUrl;
var subtitle = jsonSlides[j].subtitle;
var text = jsonSlides[j].text;
var date = jsonSlides[j].date;
$slideInner.append('<div class="slide" id="'+idSlides+'"><div class="hover" id="'+idHover+'"></div></div>');
$('#'+idSlides).css('top', '56.21875px');
document.getElementById(idSlides).style.backgroundImage = bgImgUrl;
$('#'+idHover).append('<div class="hover-title"><h3><a href="'+artUrl+'">'+title+'</a></h3><span class="hover-subtitle">'+subtitle+'</span></div><span class="hover-date">'+date+'</span><br clear="all" /><p class="hover-text">'+text+'</p>');
}
$slides = $slideInner.find('.slide');
$hovers = $slides.find('.hover');
// Building the thumbnail navigation
$slideShow.append('<div id="slideShowNavigation"><ul id="navigationThumbnails"></ul></div>');
$slideNav = $slideShow.find('#slideShowNavigation');
$navThumb = $slideNav.find('#navigationThumbnails');
for (i=0; i<numberOfSlides; i++) {
thumbImgs[i] = jsonSlides[i].mediaUrl;
// alert(thumbImgs);
}
for (i=1; i<=numberOfSlides; i++) {
j = i-1;
var idThumbs = "thumb_Nr"+i;
bgImgUrl = "url('" +jsonSlides[j].mediaUrl+ "')";
$navThumb.append('<li class="thumb" id="'+idThumbs+'"></li>');
document.getElementById(idThumbs).style.backgroundImage = bgImgUrl;
}
$thumb = $navThumb.find('.thumb');
$( '<li class="year"> > 2000 > </li>' ).insertBefore( "#thumb_Nr62" );
$navThumb.prepend('<li class="year">1980 >> </li>');
$navThumb.append('<li class="year"> 2020 >></li>');
$navThumb.append('<br clear="both" />');
// ...some
// ...more
// ...functions
});
解雇太早了？
我也试过$(document).ready()，但没有效果。
或者是否有任何原因可以在$(window).load()全局范围内使用，而不将其从$(document).ready()中删除？
答案 0 :(得分：1)
可能是因为您的脚本在之前运行加载。尝试使用$(window).ready()。
修改
错误的功能.load()我的意思是.ready（）......哎呀！
答案 1 :(得分：0)
我的最后一个重大改变是将我的剧本分为两部分。一个在
$(document).ready()之外，一个在里面。我希望用户能够通过HTML中的按钮调用函数。为了实现此功能，此功能必须是全局的，不能位于$(document).ready()内。
Actualy，it can：
所有全局JavaScript对象，函数和变量都自动成为窗口对象的成员。
我想你需要这样的东西：
window.addEventListener('DOMContentLoaded', function () {
window.my_magic_function = function (/* my magic params */) {
/* doing my magic */
};
});
<button onclick="my_magic_function(/* my magic params */)">Do magic</button>
window.addEventListener('DOMContentLoaded', ...)相当于$(document).ready(...)