[英]Create dynamic content in my modal in JS
I'm currently working on someone's website and I created 6 different modals for each product. 我目前正在某人的网站上工作,并且为每种产品创建了6种不同的模式。 But I would like to insert his content in each modal when I click on the modal button. 但是,当我单击模式按钮时,我想在每个模式中插入他的内容。
So far I've done this: 到目前为止,我已经做到了:
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">×</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>
Now I would like to add the content of my 6 products that I stored in my array into my modals. 现在,我想将存储在数组中的6种产品的内容添加到模态中。 Can someone help me with this please? 有人可以帮我吗?
Thank you very much in advance. 提前非常感谢您。
John 约翰
Have a look at this fiddle modal dynamic content using javascript . 看看使用javascript的这种提琴形式的动态内容 。
In this i have passed product index as 1. You can test it by creating array for 5 more products and passing index as 2,3,4,5 and 6 respectively. 在此,我已将产品索引传递为1。您可以通过为另外5个产品创建数组并分别将索引传递为2、3、4、5和6来对其进行测试。
Note that I have called showProduct() function on click of button. 请注意,我在单击按钮时调用了showProduct()函数。
HTML : 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">×</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 :- 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.