jquery 질문...

Question

2009090400_1516779284.3636.png

화면 여러곳에 위치해 있는 버튼 클릭 시 나오는 팝업이 많습니다.

제가 해결해야할 문제는...

하나의 버튼을 클릭 시 해당 팝업만 보여주고 나머지 팝업은 display:none을 해야하는 상태입니다.

수월하게 하기위해 변수에 배열로 넣어서 처리하고 있는데.. popuplist[x].toggle(); 밑에

어떻게 넣어줘야지 다른 팝업들은 display:none 처리를 할지 ,... 막막하네요 ㅠㅠ

트샷 · Accepted Answer

다음과 같은 로직

1) 모든 팝업을 hide() 처리

후

2) 버튼 클릭과 관계된 해당 팝업만 show() 처리

을 한 번 생각해 볼 수 있지 않을까 합니다.

??

for (i = 0; i < 4; i++) {

popupList[i].hide();

}

// show() 처리

흉내쟁이 · Answer

각각의 버튼들에 공통의 클래스를 적용해주시고 버튼 클릭시 공통클래스로 숨김처리하고 클릭에 반응한 버튼만 보여주는 식으로 만들면 됩니다.

가령 공통의 클래스명이 btn_toggle 일경우,

var btnToggle = $('.btn_toggle');

btnToggle.on('click', function() {

btnToggle.hide();

$(this).show();

})

와 같은 형식이죠.