在我的模态中创建动态内容在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; 
}