我正在尝试在 HTML 中显示来自 django for 循环的信息。 HTML如下：
<div class="row">
{% for product in page.object_list %}
<div class="col-lg-3">
<img class="thumbnail update-wishlist " style="height: auto" src="{{product.finalimagelink}}">
<div class="box-element product">
<h6><strong>{{product.name}}</strong></h6>
<hr>
<a id="mySizeChart" class="button" style="vertical-align:middle"><span>Prices</span></a>
<div id="mySizeChartModal" class="ebcf_modal">
<div class="ebcf_modal-content">
<span class="ebcf_close">×</span>
<p>{{product.name}} FROM {{product.store}} £{{product.price}}</p>
</div>
</div>
<button data-product="{{product.id}}" data-action="add" class="btn btn-outline-secondary add-btn update-wishlist" style="width:50px;"><img class="button-image" src="{% static 'images/add.png' %}"></button>
<h4 style="display: inline-block; float: right"><strong>£{{product.price}}</strong></h4>
</div>
</div>
{% endfor %}
</div>
这适用于在网格中加载产品，但是当单击<a id="mySizeChart" class="button" style="vertical-align:middle"><span>Prices</span></a>仅显示第一个产品的数据。我不知道这是为什么。除此之外，我还使用 JavaScript 将模态框显示为弹出窗口：
$(".button").click(function() {
$("#mySizeChartModal").show();
});
$("#mySizeChartModal .ebcf_close").click(function() {
$("#mySizeChartModal").hide();
});
CSS如下：
/**---------------------*/
/* Popup box BEGIN */
/* The Modal (background) */
.ebcf_modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.ebcf_modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 65%;
}
/* The Close Button */
.ebcf_close {
color: #aaaaaa;
float: right;
}
.ebcf_close:hover,
.ebcf_close:focus {
color: #000;
cursor: pointer;
}
关于当我单击模态弹出窗口时如何获取要加载的每个产品的数据有什么想法吗？
