제이쿼리 이미지 클릭시 변경 ex)이상형월드컵 채택완료

aaab

7년 전 조회 2,687

</p>

<p>$(document).ready(function() {

 $('#show1').show();

 $('#show2').show();

 $('#show3').show();

 $('#show4').show();

 $('#show5').hide();

 $('#show6').hide();

 $('#show7').hide();

 $('#show8').hide();

 </p>

<p>$('#show1').click(function(){  // 덧니

 $('#show1').hide();

 $('#show2').hide();

 $('#show3').hide();

 $('#show4').hide();

 $('#show5').show();

 $('#show6').show();</p>

<p>$('#show2').click(function(){  // 덧니

 $('#show1').hide();

 $('#show2').hide();

 $('#show3').hide();

 $('#show4').hide();

 $('#show7').show();

 $('#show8').show();</p>

<p>return false;</p>

<p>});

});

});

});

</script></p>

<p>

예를들어 이상형월드컵처럼 이미지 클릭시 그 이미지를 클릭하면

다른건 숨겨지고 다른 이미지가 나오게하는데

차례대로 show1 클릭시 조건 주고 show2 클릭시 조건주고 3 ,4 번까지 줬는데

show1클릭시 이미지가 변경이 되는데 show2 3 4 는 클릭해도 아무런 이벤트가 발생하지 않는데 뭐때문인가요..? 저 클릭이벤트자체가 하나밖에 실행하지못하나요?

#제이쿼리

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

정렬:

채택된 답변

+20 포인트

볼피드

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

괄호가 잘못 되있으신것 같은데요

</p>

<p>$(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();

    });

});</p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

나시

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

답은 아니지만 이렇게 복잡하게 하시는게 이해가 안되네요

이런식으로 줄이면 보기도 좋고 수정하기도 좋은데요

</p>

<p>     $('#show1,#show2,#show3,#show4').show();

     $('#show5,#show6,#show7,#show8').hide();</p>

<p>

</p>

<p>     var show_id = '#show1,#show2,#show3,#show4';</p>

<p>     var hide_id = '#show5,#show6,#show7,#show8';</p>

<p>     $(show_id).show();

     $(hide_id).hide();</p>

<p>

이런식으로 하던지, 함수 만들어서 돌리던지 하면 편할텐데요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인