在我的模態中創建動態內容在JS

Question

我目前正在某人的網站上工作，併爲每個產品創建了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> 

現在我想補充的是我存放在我的陣列到我的情態動詞我6種產品的內容。有人可以幫我解決這個問題嗎？

非常感謝您提前。

約翰

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