여러개 팝업 스크립트 처리 어떻게 해야할까요 ㅜㅜ

Question

test1

1

test2

2

$(document).ready(function() { var $panel = $(".popup_panel1"); var $panelContents = $panel.find(".popup_contents"); $(".a_btn1").on("click", function(e) { // 팝업 가운데 설정(가로) if ($panelContents.outerWidth() < $(document).width()) { $panelContents.css("margin-left", "-" + $panelContents.outerWidth() / 2 + "px"); } else { $panelContents.css("left", "0px"); } // 팝업 가운데 설정(세로) if ($panelContents.outerHeight() < $(document).height()) { $panelContents.css("margin-top", "-" + $panelContents.outerHeight() / 2 + "px"); } else { $panelContents.css("top", "0px"); } // 레이어 팝업 열기 $panel.fadeIn(); }); // 팝업 닫기 이벤트 정의 $("#btn_popup_close").on("click", popupClose); // 팝업 배경 클릭 이벤트 정의 $panel.find(".popup_bg").on("click", popupClose); function popupClose(e) { $panel.fadeOut(); // 이벤트 기본 동작 중단 e.preventDefault(); } }); $(document).ready(function() { var $panel = $(".popup_panel2"); var $panelContents = $panel.find(".popup_contents"); $(".a_btn2").on("click", function(e) { // 팝업 가운데 설정(가로) if ($panelContents.outerWidth() < $(document).width()) { $panelContents.css("margin-left", "-" + $panelContents.outerWidth() / 2 + "px"); } else { $panelContents.css("left", "0px"); } // 팝업 가운데 설정(세로) if ($panelContents.outerHeight() < $(document).height()) { $panelContents.css("margin-top", "-" + $panelContents.outerHeight() / 2 + "px"); } else { $panelContents.css("top", "0px"); } // 레이어 팝업 열기 $panel.fadeIn(); }); // 팝업 닫기 이벤트 정의 $("#btn_popup_close").on("click", popupClose); // 팝업 배경 클릭 이벤트 정의 $panel.find(".popup_bg").on("click", popupClose); function popupClose(e) { $panel.fadeOut(); // 이벤트 기본 동작 중단 e.preventDefault(); } }); 위와 같이 btn1 클릭시 popup_panel 1를 불러오고btn2 클릭시 popup_panel 2를 불러오는 형태로총 14개 팝업을 만들었는데요.. 스크립트가 계속 저런식으로 늘여써져있는 상태인데요 ㅜㅜ이걸 반복문으로 간단히 줄일 수 있다던데 개발자가 아무리 검색해도 이해가 도통안되서요 ㅜㅜ어떻게 처리해야하는지 알려주실 수 있으실까요...

혹등혹등 · Accepted Answer

for (var i&#61;1 ; i<&#61;14 ; i&#43;&#43;) { $(“.a_btn”&#43;i).on(“click”, function(e) { …. } } 이런식으로 처리할 수 있지 않을까요?

푸란 · Answer

해당 부분을 어디에 넣어야하나요..ㅜㅜ정말 죄송합니다.

혹등혹등 · Answer

$(document).ready(function() { for (var i&#61;1 ; i<&#61;14 ; i&#43;&#43;) { var $panel &#61; $(&#34;.popup_panel&#34;&#43;i); var $panelContents &#61; $panel.find(&#34;.popup_contents&#34;); $(&#34;.a_btn&#34;&#43;i).on(&#34;click&#34;, function(e) { ......... }); .......

푸란 · Answer

마지막 14번만 열리네요.. ㅜㅜ $(document).ready(function() { for (var i&#61;1 ; i<&#61;16 ; i&#43;&#43;) { var $panel &#61; $(&#34;.popup_panel&#34;&#43;i); var $panelContents &#61; $panel.find(&#34;.popup_contents&#34;); $(&#34;.a_btn&#34;&#43;i).on(&#34;click&#34;, function(e) { // 팝업 가운데 설정(가로) if ($panelContents.outerWidth() < $(document).width()) { $panelContents.css(&#34;margin-left&#34;, &#34;-&#34; &#43; $panelContents.outerWidth() / 2 &#43; &#34;px&#34;); } else { $panelContents.css(&#34;left&#34;, &#34;0px&#34;); } // 팝업 가운데 설정(세로) if ($panelContents.outerHeight() < $(document).height()) { $panelContents.css(&#34;margin-top&#34;, &#34;-&#34; &#43; $panelContents.outerHeight() / 2 &#43; &#34;px&#34;); } else { $panelContents.css(&#34;top&#34;, &#34;0px&#34;); } // 레이어 팝업 열기 $panel.fadeIn(); });}; // 팝업 닫기 이벤트 정의 $(&#34;#btn_popup_close&#34;).on(&#34;click&#34;, popupClose); // 팝업 배경 클릭 이벤트 정의 $panel.find(&#34;.popup_bg&#34;).on(&#34;click&#34;, popupClose); function popupClose(e) { $panel.fadeOut(); // 이벤트 기본 동작 중단 e.preventDefault(); }});

여러개 팝업 스크립트 처리 어떻게 해야할까요 ㅜㅜ

4개의 답변

#popup 목록