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的结尾，而不是用不同的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;
    });
});

结合使用jQuery简化simpleModal调用？

1 个答案: