最小化Javascript/jQuery弹出窗口的代码

我正在创建一个个人网站来展示演示材料，我想允许用户点击一个缩略图，这会导致一个小窗口向下动画并显示细节。目前，我让它工作得很好，但随着我继续添加项目，代码变得非常重复。我必须为“项目2”、“项目3”等重复所有这些代码。。。是否有一种更有效的方法来处理这个问题，可能是为我的内容设置一个脚本和一个动画包含框？我不熟悉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>

HTML

标题
内容
详图1
详图2

你们很接近了。不要按“id”选择元素，而是使用它们的关联类（使用点“.”而不是“#”）选择它们，例如$（“.activator_item1”）-这将对所有activator_项应用相同的代码。

这可以通过更好的命名来解决。每个元素都有一个不同的类，这剥夺了类的分组能力。考虑分离类以更好地访问迭代器。例如，您有

，可以用

代替。这将允许您选择JQuery中的所有激活器并对其进行迭代：

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

---

正确使用CSS类-您可以有一个规则

.activator\u item

，

.box\u item

，等等，而不必重复CSS。接下来，使用JavaScript函数弹出一个窗口。

 <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>

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