애드프로 님 답변 참고해 코드를 수정해 봤는데,,, 채택완료
애드프로 님 답변 https://sir.kr/qa/323770">https://sir.kr/qa/323770
</p>
<p><script src="<a href="http://code.jquery.com/jquery-latest.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.js"></script></a></p>
<p><style>
.hz {width:100px; height:100px; }
.r {background: red;}
.b {background: blue; display: none;}
</style></p>
<p><div class="hz r"></div>
<div class="hz b"></div></p>
<p><button onmouseover="r()">red</button>
<button onmouseover="b()">blue</button></p>
<p><script>
//$(document).ready(function() { <---- 이 부분이 있으면 작동 X
function r(){
$('.hz').css('display','none'); $('.r').css('display','block');
}
function b(){
$('.hz').css('display','none'); $('.b').css('display','block');
}
//}); <---- 이 부분이 있으면 작동 X
</script></p>
<p>
왜 ready 메서드가 존재하면 작동 안 하는지 궁금합니다.
https://codepen.io/sinbi/pen/BaBqjPo">https://codepen.io/sinbi/pen/BaBqjPo 작동 O
https://codepen.io/sinbi/pen/zYOmrPp">https://codepen.io/sinbi/pen/zYOmrPp 작동 X
답변 3개
저 함수를 ready 내에 넣어야할 이유도 없지만 넣으면 안되는 이유는
ready이부분도 결국은 함수 거든요
함수내의 값들은 전역으로 설정한 값이 아니면 외부에서 참조하거나 호출할 수가 없는 거죠
ready내에 aaa= 10이라고 설정하고 ready밖에서 aaa를 찾아보면 값이 없죠
아래처럼
<script>
$(function(){
var aaa=10;
});
function kkk(){alert(aaa);}
</script>
<a href="javascript:kkk()">kkk</a>
function kkk()를 ready내에 넣으면 마찬가지로 찾을 수가 없게되죠
댓글을 작성하려면 로그인이 필요합니다.
그것은 함수를 ready안에 method 형태로 (지역함수)로 선언해서 그렇습니다.
</p>
<p><script src="<a href="http://code.jquery.com/jquery-latest.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.js"></script></a></p>
<p><style>
.hz {width:100px; height:100px; }
.r {background: red;}
.b {background: blue; display: none;}
</style></p>
<p><div class="hz r"></div>
<div class="hz b"></div></p>
<p><button onmouseover="r()">red</button>
<button onmouseover="b()">blue</button></p>
<p><script>
$(document).ready(function() {
r(); //굳이 부르겠다면 이렇게
b();
});
function r(){
$('.hz').css('display','none'); $('.r').css('display','block');
}
function b(){
$('.hz').css('display','none'); $('.b').css('display','block');
}
</script></p>
<p>
와 같이 선언부를 나누고 불러도 되지만
ready는
body 태그의
Onload에서 실행되는것과 유사한 구조라서
실제 마우스 오버이벤트가 작동하려면
함수가 밖으로 나와있어야죠
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인