javascript - 将重复的 div 与 div 中的一些不同内容绑定(bind)

Question

我正在处理重复的 div，其中有一些变化。假设我的页面上有一些按钮，单击它们会打开一个模式对话框。但是，模态中的内容对于每个按钮都有点不同。我的意思是模态内部 80% 的内容在这些按钮上重复使用，剩下的 20% 根据每个特定按钮而变化。

我厌倦了复制整个 div(模态)并只做一些小的改变来适应每个按钮，因为我目前在页面上有 24 个按钮，而且这个数字在不久的将来还会增加。

所以，我想问一下是否有解决这个问题的好方法。谢谢大家。

附言。对不起，如果我在解释问题时不是很清楚。只是这里的新手，哈哈。

Answer 1

将所有按钮指向模板模态，然后在单击按钮时，使用动态信息修改模板模态。您可以将动态信息存储在一个对象数组中，或者您可以创建一个系统来将动态信息存储在 HTML 中，但是是隐藏的。

例如:

var contents = [{
    title: "Header 1",
    body: "Body 1"
},{
    title: "Header 2",
    body: "Body 2"
}];

$("button[id^=modal]").click(function() {
    var content = contents[this.id.substring(5) - 1]; // id gives index of content in array
    $("#myModal .modal-title").html(content.title);
    $("#myModal .modal-body").html(content.body);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<button id="modal1" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal 1</button>

<button id="modal2" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal 2</button>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"><!--Template Title--></h4>
      </div>
      <div class="modal-body"><!--Template Body--></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

JSFiddle