我一直在嘗試實作一種將資訊動態加載到模式中的方法，以便快速預覽我的電子商務網站。任何幫助將不勝感激，我不確定我應該朝哪個方向前進。我嘗試使用 Javascript 并創建一個 onclick 函式來重繪 div，但到目前為止我還沒有成功。如果我的問題的任何部分不清楚，請發表評論。
附件是關于我端渲染內容的螢屏截圖，以了解我正在嘗試做什么。
https://gyazo.com/e0168c6d41a19071a95e8cecf84e37a9
商店.html
{% extends 'main.html' %}
{% load static %}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="{% static 'css/store.css' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
{% block content %}
<div class="p-5 text-center bg-image mt-4 mb-4" style="
background-image: url('{% static 'images/ship.jpg' %}');
background-size: auto;
height: 400px;
box-shadow: 1px 2px 2px;
">
<div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="text-white">
<h1 class="font-weight-bold mb-3" style="color: white;">Store</h1>
<h2 class="font-weight-bold mb-3" style="color: white;">
Welcome to our online shop, where our shipping quotes are listed below</h1>
<h3 class="mb-3" style="color: white;">
We ship a variety of items to fit your needs including cars, car parts, heavy duty boxes, clothes, canned goods and food, furniture, household items, freight containers and more.</h4>
<a class= "btn btn-success mb-4" href="{% url 'about' %}" role="button">Click here to learn more</a>
</div>
</div>
</div>
</div>
<div class="row mt-4 mb-4">
{% for product in products %}
<div class="col-lg-4">
<img class="thumbnail" src="{{product.imageURL}}">
<div class="box-element product">
<h6><strong>{{product.name}}</strong></h6>
<hr>
<button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal">View Details</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modal-title">{{product.name}}</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<img class="thumbnail" src="{{product.imageURL}}">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% if user.is_authenticated %}
{% if product.specialObject == 0 %}
<button data-product={{product.id}} data-action="add" class="btn btn-outline-secondary add-btn update-cart">Add to Cart</button>
<h4 style="display: inline-block; float: right"><strong>${{product.price|floatformat:2}}</strong></h4>
{% endif %}
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% endblock content %}
</body>
</html>
模型.py
class Product(models.Model):
name = models.CharField(max_length=150, null=True)
price = models.FloatField()
image = models.ImageField(null=True, blank=True)
specialObject = models.BooleanField(default=False)
def __str__(self):
return self.name
@property
def imageURL(self):
try:
url = self.image.url
except:
url = ''
return url
uj5u.com熱心網友回復：
您可以將 分配id給h6，img然后button tags分別用于javascript通過檢索必要的 id 來更新模態。
例如：
{% for product in products %}
...
# Here you can use the product id to mark each tags within the iteration
<img id="image-url-{{ product.id }}" class="thumbnail" src="{{ product.imageURL }}">
# Applying the same concept as above to the h6 and button tags
<div class="box-element product">
<h6 id="product-name-{{ product.id }}"><strong>{{ product.name }}</strong></h6>
<hr>
# Can use the onclick event here on the button and pass the button's id which is the product's id itself to be dealt with in js.
<button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal" id="{{ product.id }}" onclick="updateModal(this.id)">View Details</button>
...
</div>
...
{% endfor %}
# I'd suggest moving the modal outside of the forloop as well...
<!-- Modal -->
...
<!-- Modal content-->
...
<h4 class="modal-title" id="modal-title"></h4> # Leave here blank...
...
<img class="thumbnail" src="..." id="modal-image"> # Assign an id here as well.
...
...
# Javascript
<script type='text/javascript'>
function updateModal(id){
let product_name = document.getElementById("product-name-" id).textContent;
let image_src = document.getElementById("image-url-" id).src;
# Now setting the modal title and image with the values above...
document.getElementById("modal-title").innerHTML = product_name;
document.getElementById("modal-image").src = image_src;
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486034.html
標籤：javascript html django 阿贾克斯 django模型
下一篇：從函式中獲取ajax回傳