Javascript/jQuery 팝업 코드 최소화 코드

Question

데모 자료를 보여주기 위해 개인 사이트를 만들고 있는데, 사용자가 작은 창을 아래쪽으로 움직이고 세부 정보를 표시하도록하는 미리보기 이미지를 클릭하도록 허용하려고합니다. 현재 완벽하게 작동하지만 항목을 계속 추가하면 코드가 매우 반복적으로 표시됩니다. "item2," "item3,"등등 ...에 대해이 코드를 모두 반복해야합니다. 아마도 1 개의 스크립트로 처리 할 수있는 더 효율적인 방법이 있을까요? jQuery와 Javascript가 처음인데 제 코드를 능률화하는 데 더 나아 가고 싶습니다.

는 여기에 내가 사용하고있는 작업은 다음과 같습니다

<script type="text/javascript"> 
$(function() { 
$('#activator_item1').click(function(){ 
    $('#overlay').fadeIn('fast',function(){ 
     $('#box_item1').animate({'top':'250px'},500); 
    }); 
    }); 
    $('#boxclose_item1').click(function(){ 
    $('#box_item1').animate({'top':'-500px'},500,function(){ 
     $('#overlay').fadeOut('fast'); 
    }); 
    }); 

}); 
</script> 

CSS

.box_item1{ 
     position:fixed; 
     top:-800px; 
     height:400px; 
     width:550px; 
     left:30%; 
     right:30%; 
     background-color:#fff; 
     color:#333; 
     padding:20px; 
     border:2px solid #ccc; 
     -moz-border-radius: 20px; 
     -webkit-border-radius:20px; 
     -khtml-border-radius:20px; 
     -moz-box-shadow: 0 1px 5px #333; 
     -webkit-box-shadow: 0 1px 5px #333; 
     z-index:101; 
     text-align:left; 
    } 
    .box_item1 h1{ 
     border-bottom: 1px solid #7F7F7F; 
     margin:-20px -20px 0px -20px; 
     padding:10px; 
     background-color:#1E87BE; 
     color:#fff; 
     font-family:"Arial Black", Gadget, sans-serif; 
     -moz-border-radius:20px 20px 0px 0px; 
     -webkit-border-top-left-radius: 20px; 
     -webkit-border-top-right-radius: 20px; 
     -khtml-border-top-left-radius: 20px; 
     -khtml-border-top-right-radius: 20px; 
    } 
    a.boxclose_item1{ 
     float:right; 
     width:26px; 
     height:26px; 
     background:transparent url(images/cancel.png) repeat top left; 
     margin-top:-30px; 
     margin-right:-30px; 
     cursor:pointer; 
    } 
    a.activator_item1{ 
     width:153px; 
     height:150px; 
     position:relative; 
     top:0px; 
     left:0px; 
     z-index:1; 
     cursor:pointer; 

HTML

<div id="item1"><a class="activator_item1" id="activator_item1"><img src="images/item1_button.png"/></a></div> 

<div class="overlay" id="overlay" style="display:none;"></div> 

<div class="box_item1" id="box_item1"> 
    <a class="boxclose_item1" id="boxclose_item1"></a> 
    <h1>Title</h1> 

    <h2>Content</h2> 
    <h3><ul><li>Detail 1</li><li>Detail 2</li></ul></h3> 

</div> 
</div> 

Answer 1

당신은 아주 가까이 있습니다. "id"로 요소를 선택하는 대신 연관된 클래스를 사용하여 요소를 선택하십시오 (예 : "#"대신 점 "."사용). $ ('.activator_item1') - 모든 activator_item에 동일한 코드를 적용합니다.

Answer 2

더 나은 이름 지정으로 해결할 수 있습니다. 각 요소에 대해 고유 한 클래스가있어 클래스의 그룹화 권한을 손상시킵니다. 이터레이터에 더 잘 액세스 할 수 있도록 클래스를 분리 해보십시오. 예를 들어 <a class="activator_item1" id="activator_item1">이 있고 대신 <a class="activator item1" id="activator_item1">을 가질 수 있습니다.

$('.activator').each(function() { 
    //your code 
});