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

ETC...

我可以通过添加更多的 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 的结尾，而不是用不同的 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;
    });
});​