제이쿼리 이미지 클릭시 변경 ex)이상형월드컵
본문
$(document).ready(function() {
$('#show1').show();
$('#show2').show();
$('#show3').show();
$('#show4').show();
$('#show5').hide();
$('#show6').hide();
$('#show7').hide();
$('#show8').hide();
$('#show1').click(function(){ // 덧니
$('#show1').hide();
$('#show2').hide();
$('#show3').hide();
$('#show4').hide();
$('#show5').show();
$('#show6').show();
$('#show2').click(function(){ // 덧니
$('#show1').hide();
$('#show2').hide();
$('#show3').hide();
$('#show4').hide();
$('#show7').show();
$('#show8').show();
return false;
});
});
});
});
</script>
예를들어 이상형월드컵처럼 이미지 클릭시 그 이미지를 클릭하면
다른건 숨겨지고 다른 이미지가 나오게하는데
차례대로 show1 클릭시 조건 주고 show2 클릭시 조건주고 3 ,4 번까지 줬는데
show1클릭시 이미지가 변경이 되는데 show2 3 4 는 클릭해도 아무런 이벤트가 발생하지 않는데 뭐때문인가요..? 저 클릭이벤트자체가 하나밖에 실행하지못하나요?
답변 2
괄호가 잘못 되있으신것 같은데요
$(document).ready(function() {
$('#show1').show();
$('#show2').show();
$('#show3').show();
$('#show4').show();
$('#show5').hide();
$('#show6').hide();
$('#show7').hide();
$('#show8').hide();
$('#show1').click(function(){ // 덧니
$('#show1').hide();
$('#show2').hide();
$('#show3').hide();
$('#show4').hide();
$('#show5').show();
$('#show6').show();
});
$('#show2').click(function(){ // 덧니
$('#show1').hide();
$('#show2').hide();
$('#show3').hide();
$('#show4').hide();
$('#show7').show();
$('#show8').show();
});
});
답은 아니지만 이렇게 복잡하게 하시는게 이해가 안되네요
이런식으로 줄이면 보기도 좋고 수정하기도 좋은데요
$('#show1,#show2,#show3,#show4').show();
$('#show5,#show6,#show7,#show8').hide();
var show_id = '#show1,#show2,#show3,#show4';
var hide_id = '#show5,#show6,#show7,#show8';
$(show_id).show();
$(hide_id).hide();
이런식으로 하던지, 함수 만들어서 돌리던지 하면 편할텐데요
답변을 작성하시기 전에 로그인 해주세요.
