divの繰り返しdivをdiv内の少し異なる内容でバインド

Question

私は繰り返しdivに取り組んでいますが、そこにはいくつかの変更があります。たとえば、クリックしたときにモーダルダイアログを開くいくつかのボタンがページ上にあるとします。ただし、モーダル内のコンテンツはボタンごとに少し異なります。私は、モーダルの内側のものの80％がこれらのボタンで繰り返し使用され、残りの20％がそれぞれの特定のボタンに応じて変更されることを意味します。

私は現在、ページに24個のボタンがあり、近い将来、数字が増えているため、div全体（モーダル）を複製​​して各ボタンに合わせて少しだけ変更するのにうんざりしています。

この問題に対処する優れた方法があるかどうかを尋ねています。皆さん、ありがとうございました。

ps。申し訳ありませんが、私は問題を説明することではっきりしていない場合。ここの初心者は笑います。

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