我怎样才能编写变量，所以我不必重复自己？

Question

我正在使用名为animatedModal.js的动画模式

为了点击模式，我每次需要一个新模态时都必须注册一个新的ID和类。我把它写成静态HTML，CSS和JavaScript。

当我知道有更多干嘛的方式时，我不想注册49个类和ID。如何编写此代码以便它找到类和ID并将它们传递给函数？

<div class="item box student-life"> 
    <a class="demo2" href="#animatedModal-2"> 
        <img class="responsive-img" src="img/design-3-cards-buttons-icon-update-final-design-TILES3_07.jpg">
          <div class="content-card">
            <h3 class="title">This is an example of a long headline. They Happen sometimes but, I won't let them destroy my layout. Not this time.</h3>
            <h5 class="title">Service Learning</h5>
            <div class="icon"><img src="img/icons/student-life.png" class="responsive-img" alt=""/></div>
            <button class="btn pull-right">Read More</button>
          </div>
     </a> 
 </div>

<!--DEMO02 Window-->
<div id="animatedModal-2"> 
  <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID  class="close-animatedModal" -->
  <div class="close-animatedModal-2">CLOSE MODAL</div>
  <div class="modal-content"> <img class="responsive-img" src="img/ART-01024.jpeg">
     <h1>Content for this block</h1>
  </div>
</div>

JavaScript的：

$("#demo01").animatedModal({
    animatedIn:'zoomIn',
    animatedOut:'bounceOut',
    color:'#39BEB9',
    beforeOpen: function() {

        var children = $(".thumb");
        var index = 0;

        function addClassNextChild() {
            if (index == children.length) return;
            children.eq(index++).show().velocity("transition.expandIn", { opacity:1, stagger: 250 });
            window.setTimeout(addClassNextChild, 200);
        }

        addClassNextChild();

    },
    afterClose: function() {
      $(".thumb").hide();

    }
});