jQuery関数を1つの関数に結合する

Question

私は一種のジョブボードを作成していますが、同時に1つのページからトリガされる2つのモーダルがあります。私はモーダルをトリガするためにこれらの関数を作成しました。できるだけ短く書く方法を教えてください。ありがとうございました。 ので、これは私のhtmlコードの主要な部分である：

<!-- START main part --> 
<div class="container-fluid"> 
    <div class="container"> 
     <div class="well well-colour cien space"> 
      <div class="row text-center"> 
       <!-- START --> 
       <div class="col-md-9"> 
        <a id="test" href="#destination">FIRST modal</a> 
        <!-- Modal --> 
        <div id="destination"></div> 
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
         <div class="modal-dialog"> 
          <div class="modal-content"> 
           <div class="modal-header"> 
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
            <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
           </div> 
           <div class="modal-body"> 
            <h3>First Modal</h3> 
           </div> 
           <div class="modal-footer"> 
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
            <button type="button" class="btn btn-primary">Save changes</button> 
           </div> 
          </div> 
         </div> 
        </div> <!-- END First --> 

        <a id="test2" href="#destination2">SECOND modal</a> 
        <!-- Modal --> 
        <div id="destination2"></div> 
        <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
         <div class="modal-dialog"> 
          <div class="modal-content"> 
           <div class="modal-header"> 
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
            <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
           </div> 
           <div class="modal-body"> 

            <h3>Second Modal</h3> 

           </div> 
           <div class="modal-footer"> 
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
            <button type="button" class="btn btn-primary">Save changes</button> 
           </div> 
          </div> 
         </div> 
        </div> <!-- END Second --> 
       </div> 
      </div>    
     </div> 
     <!-- END main part--> 
    </div> 
</div> 

とjQueryあなたのHTMLに、あなたの要素#testと#test2は、例えばdata-id属性を持っている場合、私は

jQuery(function(){ 
    $('#test').click(function(){ 
     $('#myModal').modal('show'); 
    }); 
    $('#test2').click(function(){ 
     $('#myModal2').modal('show'); 
    }); 
}); 

Answer 1

を「短縮」したいと思います、あなたが行うことができます：

jQuery(function(){ 
    $('#test, #test2').click(function(){ 
     var id = $(this).attr('data-id'); 
     $('#myModal'+id).modal('show'); 
    }); 
}); 

を要素は、2にこの機能Oをdata-id属性を持っている場合ペンモーダル#myModal2

Answer 2

あなたのコードを整理するためにDRY原則を使用することができます。最初に、モーダルをトリガーする要素に共通のクラスを使用し、その要素の一意の関係を格納するためにdata-*属性を使用します。

<button type="button" class="test" data-target="#myModal">Open modal</button> 
<button type="button" class="test" data-target="#myModal2">Open modal #2</button> 

その後、あなたは正しい要素にmodal()を呼び出すためにあなたのクリックハンドラでそのdata属性を読むことができます：HTMLマークアップを提供

jQuery(function(){ 
    $('.test').click(function(){ 
     var target = $(this).data('target'); 
     $(target).modal('show'); 
    }); 
});