Question

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

我已经厌倦了重复整个div（模态）并只做了很小的改动以适应每个按钮，因为我目前在页面上有24个按钮，而且这个数字在不久的将来会增加。

所以，我问是否有一个很好的方法来应对这个问题。谢谢大家。

PS。对不起，如果我不太清楚解释问题。只是一个新手在这里哈哈。

Answer 1

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

例如：

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

JSFiddle

在div中绑定重复的div与一些不同的内容

1 个答案: