jquery - jQueryを組み合わせてsimpleModal呼び出しを簡素化しますか？

Question

SimpleModalを使用して、ページ上で複数のモーダルをトリガーしています。jQueryは次のようになります。

jQuery(function ($) {
    $('#basic-modal .basic').click(function (e) {
        $('#basic-modal-content').modal();

        return false;
    }); 
});

ただし、ページに複数のモーダルがあり、それぞれが異なるIDを持っています...次のようになります。

#basic-modal_2
#basic-modal-content_2 
#basic-modal_3
#basic-modal-content_3

等...

これは、次のようなjQueryを追加するだけで実現できます。

jQuery(function ($) {
    $('#basic-modal .basic').click(function (e) {
        $('#basic-modal-content').modal();

        return false;
    }); 

   $('#basic-modal2 .basic').click(function (e) {
        $('#basic-modal-content2').modal();

        return false;
    }); 
});

しかし、これは非常に非効率的です。異なるIDで同じことを繰り返すのではなく、1回の呼び出しでIDの終わりを探す方法はありますか？

ありがとう！

Answer 1

モーダルのIDをのdata-modal-id属性に保存できます.basic

<div id="basic-modal" >
   <div class="basic" data-modal-id="basic-modal-content">

   </div>
</div>

jQuery(function($) {
    $('.basic').click(function(e) {

        var id = $(this).data('modal-id');
        $('#' + id).modal();

        return false;
    });
});​