JSのモーダルで動的コンテンツを作成

Question

私は現在誰かのウェブサイトで作業しており、各製品ごとに6種類のモーダルを作成しました。モーダルボタンをクリックすると、各モーダルにコンテンツを挿入したいと思います。今、私は私のモーダルに私の配列に格納された私の6つの製品の内容を追加したい

function produits(tag, nom, price, imagesrc, description){ 
this.Tag = tag; 
this.Nom = nom; 
this.Price = price; 
this.SRC = imagesrc; 
this.Description = description; 
} 

var produit = []; 

//6x for my 6 products 
produit.push(new produits(1, "nom", 35, "path/to/img","Description")); 

In html I created my modals 6x this way 
<button type="button" id="bouton" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add to cart</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">Modal Header</h4> 
         </div> 
         <div class="modal-body"> 
         <p>Some text in the modal.</p> 
         </div> 
         <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
        </div> 
        </div> 
       </div> 

：

これまでのところ、私はこれをやりました。誰かが私を助けてくれますか？

ありがとうございます。ジョン

Answer 1

このフィドルmodal dynamic content using javascriptを見てください。

これで私は1として製品インデックスを渡しました。あなたは5つの製品のための配列を作成し、インデックスをそれぞれ2,3,4,5および6として渡すことでテストできます。

ボタンをクリックするとshowProduct（）関数が呼び出されていることに注意してください。

HTML：

<button type="button" id="bouton" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" onclick="showProduct(1);">Add to cart</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">Modal Header</h4> 
        </div> 
        <div class="modal-body"> 
        <p>Some text in the modal.</p> 
        <div class="row"> 
        <span><b>Product tag : </b></span><span id="product_tag"></span> 
        </div> 
        <div class="row"> 
        <span><b>Product nom : </b></span> 
         <span id="product_nom"></span> 
        </div> 
        <div class="row"> 
        <span><b>Product price : </b></span> 
        <span id="product_price"></span> 
        </div> 
        <div class="row"> 
        <span><b>Product image : </b></span> 
        <img id="product_image" src=""/> 
        </div> 
        <div class="row"> 
        <span><b>Product description : </b></span> 
        <span id="product_description"></span> 
        </div> 

        </div> 
        <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 
       </div> 
       </div> 
      </div> 

Javascriptを： -

function produits(tag, nom, price, imagesrc, description){ 
this.Tag = tag; 
this.Nom = nom; 
this.Price = price; 
this.SRC = imagesrc; 
this.Description = description; 
} 

var produit = []; 

//6x for my 6 products 
produit.push(new produits(1, "nom", 35, "path/to/img","Description")); 

function showProduct(productId){ 
    document.getElementById("product_tag").innerHTML = produit[productId-1].Tag; 
    document.getElementById("product_nom").innerHTML = produit[productId-1].Nom; 
    document.getElementById("product_price").innerHTML = produit[productId-1].Price; 
    document.getElementById("product_image").src = produit[productId-1].SRC; 
    document.getElementById("product_description").innerHTML = produit[productId-1].Description; 
}