기능이 같은 버튼이 여러개 있으면 어떻게 구현하나요?
본문
아래 사진처럼 상품리스트 페이지에 상품 하나 당 하나씩 달려있는 버튼인데요.
하나하나 클래스 써가는거 대신, 쉽게 구현할 수 있는 방법이 있을까요?
<div class="app_con">
<ul class="app_ul">
<li>
<span id="app_pro">사용중</span>
<button onclick="app_btn()" class="app_btn_0">
<i class="material-icons leading-icon">settings</i>
</button>
<div id="app_btn_set" class="app_btn_set">
<ul>
<li><a href="">서비스 신청일</a></li>
<li><a href="">문의하기</a></li>
<li><a href="">서비스 중지</a></li>
</ul>
</div>
</li>
</ul>
</div>
<script>
function app_btn(){
$('#app_btn_set').toggleClass('abt_set');
}
</script>
답변 2
<div class="app_con">
<ul class="app_ul">
<li>
<span id="app_pro">사용중</span>
<button class="app_btn">
<i class="material-icons leading-icon">settings</i>
</button>
<div class="app_btn_d app_btn_set">
<ul>
<li><a href="">서비스 신청일</a></li>
<li><a href="">문의하기</a></li>
<li><a href="">서비스 중지</a></li>
</ul>
</div>
</li>
</ul>
</div>
<script>
$('.app_btn').on('click', function() {
$(this).parent().find('.app_btn_d').toggleClass('app_btn_set');
});
</script>
..저만 이해가 안되는거죠??
클래스를 왜 써야하는건지부터 설명해주셔야..
답변을 작성하시기 전에 로그인 해주세요.