화면 여러곳에 위치해 있는 버튼 클릭 시 나오는 팝업이 많습니다.
제가 해결해야할 문제는...
하나의 버튼을 클릭 시 해당 팝업만 보여주고 나머지 팝업은 display:none을 해야하는 상태입니다.
수월하게 하기위해 변수에 배열로 넣어서 처리하고 있는데.. popuplist[x].toggle(); 밑에
어떻게 넣어줘야지 다른 팝업들은 display:none 처리를 할지 ,... 막막하네요 ㅠㅠ
|
답변 2개
채택된 답변
+20 포인트
2018-01-24 (수) 18:32:26
다음과 같은 로직
1) 모든 팝업을 hide() 처리
후
2) 버튼 클릭과 관계된 해당 팝업만 show() 처리
을 한 번 생각해 볼 수 있지 않을까 합니다.
??
for (i = 0; i < 4; i++) {
popupList[i].hide();
}
// show() 처리
2018-01-24 (수) 19:46:12
각각의 버튼들에 공통의 클래스를 적용해주시고 버튼 클릭시 공통클래스로 숨김처리하고 클릭에 반응한 버튼만 보여주는 식으로 만들면 됩니다.
가령 공통의 클래스명이 btn_toggle 일경우,
var btnToggle = $('.btn_toggle');
btnToggle.on('click', function() {
btnToggle.hide();
$(this).show();
})
와 같은 형식이죠.
답변을 작성하려면 로그인이 필요합니다.