Javascript 如何重构在不同div上运行的modals，使其保持干燥？

我的页面上有大约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：

//放大模式的重要组成部分
元素映射

接近
//IBOX-CONTENT的重要部分
……内容

---

如何重构模式JavaScript以避免重复代码？

我会在每个按钮上添加另一个

data-*

属性，以指示内容的来源：

<button type="button" class="btn btn-default btn-xs" data-toggle="modal"
     data-target="#enlargeStrategyModal" data-content="#ibox-2">

---

例如：

我会选择这个变量myFunc=function（myDiv）{$（'enlageElementModal.modal body'）.html（$（myDiv+'.content.active'）.html（）$（'data target=“#enlageElementModal”]'）。on（'click'，function（）{return myFunc（'ibox-1'））}）$（“[data target=“#enlargeElementModal”]”）。在（'click'，函数（）{return myFunc（“#ibox-2”）；}）上@乔治斯托克-如果这是离题，那么大多数JS问题也是离题的。对于初学者来说，OP并不是问它为什么不工作，而是特别问如何重做代码以删除重复。这是明确的、负责任的，并且与其他人相关。我可以买一个复制品，但离题了，一点也不。@jamice你的问题是（正如离题原因所说）我们缺少我们需要的信息：一个清晰的问题陈述“需要帮助使JavaScript动态化”不是一个清晰的问题陈述；包括你面临的实际问题；以及对您的问题进行一些清理（我们不需要元评论）。如果你只是要求进行重构，那么你最好去codereview.stackexchange.com，这是一个专门为这些东西设计的网站。@Jamiec-这正是我所想的。我的代码运行得非常好，我只是需要一些帮助来减少冗余：/@GeorgeStocker哦，来吧！任何了解javascript的人都知道这个用户在问什么！用户甚至表示他们没有经验，所以他们不知道使用正确的术语。此外，这不是我的问题（如果你在投票前真的读了一些东西，这会很有帮助！！）非常感谢Jamiec，让它变得非常简单，再次感谢你站出来支持我：D

$('[data-target]').on('click',function(){
    var target = $(this).data('target');
    var content = $(this).data('content');
    $(target + ' .modal-body').html($(content + ' .content.active').html());
  });