특정 클래스를 가진 태그에만 효과를 주고싶어요
본문
<ul>
<li class="on"> <!--on을 가지고있어야 버튼이 보임 -->
<button>팝업띄우기</button>
<div>팝업</div>
</li>
<li>
<button>팝업띄우기</button>
<div>팝업</div>
</li>
<li>
<button>팝업띄우기</button>
<div>팝업</div>
</li>
<li>
<button>팝업띄우기</button>
<div>팝업</div>
</li>
<li>
<button>팝업띄우기</button>
<div>팝업</div>
</li>
</ul>
div,button{display : none;}
li.on button{display : block}
이런 경우 버튼을 눌렀을때 on을 가진 li에만 팝업이 떴으면 좋겠는데
잘 안되네요ㅠㅠ
if($('li').hasClass('on')){
$('button').click(function(){
$('div').show();
});
}
아직 문법 감을 잘 못익혀서,, 스크립트 관련하여 간단한 설명도 해주시면 감사하겠습니다!
답변 2
$('button').click(function() {
if ($(this).parents('li').hasClass('on')) {
$(this).siblings('div').show();
}
});
헉 성공했습니다ㅠㅠㅠㅠㅠ넘 넘 감사합니다ㅠㅠㅠ 그런데 첫번째 li에만 이벤트가 적용되고 있는데
이런 경우 해결책도 알고계시다면 알려주실수있으실까요?ㅜ_ㅜ
첫번째 li 에만 on 이 있어서 그런거같은데요 ㅎㅎ li 에 on 이 들어가는부분의 조건을 제가 잘 몰라서 암튼 드린 코드 내용은 li 에 on 이 있는 경우에 아래 버튼을 클릭했을때 div 가 보여지도록 한겁니다~
답변 넘 감사합니다!
$('button').click(function(){
$('div').show();
});
이렇게 주면, 첫번째 li의 button에만 이벤트가 들어가고 있는 상황입니다ㅠ_ㅠ
li 에 on 을 주는 조건이 뭔가요??
혹시 이런거 생각하시는지
https://jsfiddle.net/xfz8u3g6/6/
버튼 테스트용으로
버튼 누르면 팝업 뜨도록 간단하게 선언한거였습니다ㅎㅎ
버튼에 클래스 달아주고 $('button.클래스명') 써주니까 다 잘 먹네요!
덕분에 도움 많이 받았습니다!
올려주신 코드 보면서 스크립트 공부 열심히 하겠습니다 다음에 또 답변 부탁드립니다^-^
복사해서 사용하시면됩니다.
$('button').parents('.on').click(function(){
$('div').show();
});
