0
다음 코드는 jQuery 부분을 제외하고 작동합니다. 코드는 6 도트를 검정색으로 만들고 간격을 중지하지만 id가 "cs"인 div는 페이드하지 않습니다.JavaScript의 jQuery가 작동하지 않습니다.
내 실수는 무엇입니까?
<html>
<head>
<style type="text/css">
.dot
{
background-color:#666;
width:10px;
height:10px;
border:1px solid lightgray;
margin-right:1px;
float:left;
}
body {
background:url('images/bg.png');
width:100%;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width:1000px;
position:relative;
}
#cs {
visibility:hidden;
float: left;
}
#loader {
margin-top:20px;
padding-left:10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var delayInSeconds = 0.5;
var num = 0;
var changeDot = function() {
document.getElementById('dot' + num).style.backgroundColor = "#000";
num++;
if(num == 6)
{
$('#cs').fadeIn('slow');
window.clearInterval(int);
}
};
var int = window.setInterval(changeDot, delayInSeconds * 1000);
})();
</script>
</head>
<body>
<div id="wrapper">
<div id="name">
<img src="images/as.png"/>
</div>
<div id="loader">
<div id="dot0" class="dot"></div>
<div id="dot1" class="dot"></div>
<div id="dot2" class="dot"></div>
<div id="dot3" class="dot"></div>
<div id="dot4" class="dot"></div>
<div id="dot5" class="dot"></div>
<div id="dot6" class="dot"></div>
<div id="dot7" class="dot"></div>
<div id="dot8" class="dot"></div>
<div id="dot9" class="dot"></div>
<div id="dot10" class="dot"></div>
<div id="dot11" class="dot"></div>
<div id="dot12" class="dot"></div>
<div id="dot13" class="dot"></div>
<div id="dot14" class="dot"></div>
<div id="dot15" class="dot"></div>
<div id="dot16" class="dot"></div>
<div id="dot17" class="dot"></div>
<div id="dot18" class="dot"></div>
<div id="dot19" class="dot"></div>
<div id="dot20" class="dot"></div>
</div>
<div id="cs">
<img src="images/cs.png"/>
</div>
</div>
이 브라우저 콘솔에서 오류/예외를 본 적이 있나요? – xiaowl
대신'document.getElementById ('dot'+ num) .style.backgroundColor'를 jQuery로 사용하십시오. 또한 id가'cs'이고'dot [1-6]'요소를 가지고 있는지 확인하십시오. –
'var int = '를 사용하여 오류를 던지지 않았습니까? –