[英]How do I refactor modals that operate on different DIVs to be DRY?
我的页面上有大约9个小型javascript函数,它们都执行相同的操作,为按钮所在的div内的内容打开了一个模式。
它们之间唯一的区别是每个引用了不同的div。 我想重构此代码,以免重复执行模态操作的任何代码。
使用Javascript:
// FINDS THE MODAL AND THEN PLACES THE IBOX CONTENT THAT IS CURRENTLY
// ACTIVE INSIDE THE MODAL'S BODY
$('[data-target="#enlargeElementModal"]').on('click', function () {
$('#enlargeElementModal .modal-body').html($('#ibox-1 .content.active').html());
});
$('[data-target="#enlargeStrategyModal"]').on('click', function () {
$('#enlargeStrategyModal .modal-body').html($('#ibox-2 .content.active').html());
});
....and many more of these
一些HTML:
// IMPORTANT PART OF ENLARGE MODAL
<div class="modal modal-wide fade" id="enlargeElementModal" role="dialog"><!--ENLARGE SCREEN MODAL-->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>
</button>
<h4 class="modal-title">Element Map</h4>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
// IMPORTANT PART OF IBOX-CONTENT
<div class="ibox-content mapStyle" id="ibox-1"><!--CONTENT INSIDE THE DIV BODY-->
<div class="active content" id="elementMap"><!--MAP CONTENT-->
....content
</div>
</div>
如何重构模式JavaScript,以免重复代码?
我将在每个按钮上添加另一个data-*
属性,以指示内容的来源:
<button type="button" class="btn btn-default btn-xs" data-toggle="modal"
data-target="#enlargeStrategyModal" data-content="#ibox-2">
然后使用相同的代码激活每个按钮:
$('[data-target]').on('click',function(){
var target = $(this).data('target');
var content = $(this).data('content');
$(target + ' .modal-body').html($(content + ' .content.active').html());
});
实时示例: http : //codepen.io/anon/pen/dojRRZ
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.