Question

我正在创建一个展示演示材料的个人网站，我希望允许用户点击缩略图，这会导致一个小窗口向下动画并显示详细信息。目前，我有完美的工作，但随着我继续添加项目，代码变得非常重复。我不得不为“item2”，“item3”等重复所有这些代码...是否有一种更有效的方法来处理这个问题，可能有1个脚本，也许有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

你很亲密。不是通过＆＃34; id＆＃34;选择元素，而是使用它们的关联类（使用点＆＃34;。＆＃34;而不是＆＃34;＃＆＃34;），ex。 $（＆＃39; .activator_item1＆＃39;） - 这会将相同的代码应用于所有activator_items。

Answer 2

这可以通过更好的命名来解决。每个元素都有一个独特的类，它会剥夺类的分组能力。考虑分离类以更好地访问迭代器。例如，您可以<a class="activator_item1" id="activator_item1">代替<a class="activator item1" id="activator_item1">。这将允许您选择JQuery中的所有激活器并迭代它们：

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

最小化Javascript / jQuery Popup Windows的代码

2 个答案: