div id값으로 안 보이게 하는 방법 질문요
본문
<div id='city0' style='display:none;'>
내용0
</div>
<div id='city1' style='display:none;'>
내용1
</div>
<div id='city2' style='display:none;'>
내용2
</div>
이렇게 소스가 되어 있습니다. 기본으로 다 안 보이고
<a onclick="select('1')">보기</a> 이런식으로 클릭할때만 그 숫자의 레이어만 보이게 할려고 하는데요
function select(aa)
{
document.getElementById('city'+aa).style.display = '';
}
근데 문제는 이렇게 하면 <a onclick="select('0')">보기</a> 또 눌러 버리면 0,1 레이어가 다 보이게 됩니다. 0을 클릭하면 다른건 안 보이고 0만 보여야 하고, 1을 누르면 0은 안 보이고 1만 보여야 합니다.
어떻게 해야 할까요?
물론 1을 누루면 0,2를 none 으로 하는 스크립트를 넣으면 되긴 하는데 문제는 저 값들이 고정된게 아니라서 어떤곳은 1~9까지 있을수 있고, 어떤곳은 1~3 이럴수도 있어서
뭐 길게 설명했지만 핵심은 스크립트 처리를 할때 id 값으로 포괄적으로 실행시키는 방법이있나요?
예를 들어 city 으로 시작하는 id값을 모두 한번에 실행시킬수 있는
답변 1
<script>
$(function() {
$(".city").on("click", function() {
$("#city" + $(this).data("no")).toggle();
});
});
</script>
<div id="city0" style="display: none;">0</div>
<div id="city1" style="display: none;">1</div>
<div id="city2" style="display: none;">2</div>
<a href="#" class="city" data-no="0">보기</a>
<a href="#" class="city" data-no="1">보기</a>
<a href="#" class="city" data-no="2">보기</a>
답변을 작성하시기 전에 로그인 해주세요.