[英]jQuery doesn't work in <head>?
這段代碼應該通過淡出最頂層的元素,直到只有第一個元素可見,然后淡入最頂層的元素,然后淡出最重要的元素,從疊加的列表元素(我注釋掉CSS以便我可以看到正在發生的事情)進行幻燈片展示。休息,重新開始。 如果我把腳本放在我的內容下面<body>
並拋出$(function() {
它完全正常,但在<head>
沒有任何反應。我昨天寫了這個,今天我仍然看不到錯,所以我在這里發帖。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
ul {
position: relative;
}
ul li {
/*position: absolute;
left: 0;
top: 0;*/
}
</style>
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var i = 0;
var count = $('ul li').size();
function fade() {
if (i < count-1) {
$('ul li:nth-child('+(count-i)+')').fadeOut(300);
i++;
} else {
$('ul li:nth-child('+count+')').fadeIn(300, function(){$('ul li').show();});
i = 0;
}
}
$('button').click(function() {
setInterval('fade()', 1000);
});
});
</script>
</head>
<body>
<button>Slideshow GO!</button>
<ul id="slider">
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
<li><img src="4.jpg" /></li>
</ul>
</body>
</html>
謝謝
區別在於將代碼包裝在$(function () {})
會導致fade
函數在本地聲明,而不是全局聲明。 setTimeout
在全局范圍內計算'fade()'
,因此無法找到該函數。
通常不好的做法是給setTimeout
一個字符串,所以用指向函數的指針替換它:
setTimeout(fade, 1000);
我不久前在這里回答了類似的問題,但是這個問題還依賴於從setTimeout中訪問局部變量。
在jQuery中編程的基本方法是將所有DOM訪問代碼包含在$(document).ready()事件處理程序中。 重做你的javascript如下:
var i = 0;
var count;
function fade() {
if (i < count-1) {
$('ul li:nth-child('+(count-i)+')').fadeOut(300);
i++;
} else {
$('ul li:nth-child('+count+')').fadeIn(300, function(){$('ul li').show();});
i = 0;
}
}
}
$(document).ready(function() {
count = $('ul li').size();
$('button').click(function() {
setInterval('fade()', 1000);
});
} );
請注意,i,count和fade在$(document).ready之外聲明,因為它們的范圍是全局的。 這是關鍵,因為您的setInterval處理程序需要全局可用。
jQuery的一大優勢在於,無論您將代碼放在何處,都可以保證它會在應該的時候執行。 在加載整個DOM樹之前,$(document).ready中的代碼將不會執行,從而確保您訪問時引用的所有元素都可用。
如果您打開瀏覽器的JavaScript控制台,它會告訴您具體問題是什么:
fade is not defined
setInterval('fade()', 1000);
試試這個:
$(function() {
var i = 0;
var count = $('ul li').size();
$('button').click(function() {
setInterval(function(){
if (i < count-1) {
$('ul li:nth-child('+(count-i)+')').fadeOut(300);
i++;
} else {
$('ul li:nth-child('+count+')').fadeIn(300, function(){$('ul li').show();});
i = 0;
}
}, 1000);
});
});
在setInterval
使用字符串很難正確。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.