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">を持つことができます。これはjQueryの内活性化因子のすべてを選択し、それらを反復することができるようになる：

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