JQUERY display 속성은 한번의 페이지 로딩에서 중복 사용이 안되는건가요 ?
본문
늘 고생하십니다 선배님들 !
다름이아니라 코딩 초보자인 제가 한가지 기능을 구현하려고하는데 막히는 부분이 있어
이렇게 질문글을 남깁니다 !
혹시 아래와 같은 형식( 총 4개의 이미지가 <div> 태그에 묶여있습니다. ) 으로 이루어진 형태에서
아래의 작은 이미지 1, 2, 3을 click 또는 hover 또는 mouseover 시
가장 큰 이미지로 화면을 띄우는 기능을 구현하고싶은데,
저는 jquery를 이용해서
<script>
$(document).ready(function () {
$('#contentView1').css('display', 'block');
});
$('#IMGONE').mouseenter(function () {
$('#contentView1').css('display', 'block');
$('#contentView2').css('display', 'none');
$('#contentView3').css('display', 'none');
})
$('#IMGTWO').mouseenter(function () {
$('#contentView1').css('display', 'none');
$('#contentView2').css('display', 'block');
$('#contentView3').css('display', 'none');
})
$('#IMGTHREE').mouseenter(function () {
$('#contentView1').css('display', 'none');
$('#contentView2').css('display', 'none');
$('#contentView3').css('display', 'block');
})
</script>
로 구현을 했는데 (딱 봐도 초보자의 코딩 실력이죠....ㅎㅎ)
한번 새로고침을 하면 딱 한번만 옵션이 변경되고 이후로는 적용이 되질 않습니다 ㅜ ㅜ
다시 새로고침을 해도 또 딱 한번의 display만 변경되고 이후로는 변경되지 않네요 ㅜ
Q. 이건 무엇이 잘못된걸까요 ?
Q. display 속성은 중복해서 사용이 불가한걸까요 ?
Q. 이럴 경우에는 어떤 방식으로 구현을 하면 될까요 ?
선배님들의 많은 조언 부탁드립니다 !
감사합니다 !
답변 2
크게 이미지를 보여줄곳은contentView1하나만 있으면 될듯하구요 아래처럼 하면 아래 작은이미지를 클릭시 해당 이미지가 크게 보이게 될듯하네요
$(function (){
$("#IMAGEONE").click (function (){
$("#contentView1").attr ("src",$(this).attr ("src"));
});
$("#IMAGETWO").click (function (){
$("#contentView1").attr ("src",$(this).attr ("src"));
});
$("#IMAGETHREE").click (function (){
$("#contentView1").attr ("src",$(this).attr ("src"));
});
});
감사드립니다 ^ ^
사용방법을
$('#contentView3').css('display', 'block');
이런방법으로 사용하지 마시고
$('#contentView3').hide();
$('#contentView3').show();
가 있습니다.
답변 감사드립니다 !
그럼 마우스엔터 이벤트 안에 답변해주신 내용을 넣으면 구현이 가능한거 맞을까요 ?
ㅜㅜㅜ 이 방법도 중복해서 사용은 안되네요 ㅜㅜ
