在 Django HTML 模板中隱藏和顯示元素
[英]Hide and show elements inside Django HTML template
問題描述
我有 2 個按鈕orders和suppliers .，並希望在單擊相應按鈕時在 Django Web 應用程序中顯示數據。 為此， my home.html看起來像
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".button_order").click(function(){
$(".myorders").show();
$(".mysupplier").hide();
});
$(".button_supplier").click(function(){
$(".myorders").hide();
$(".mysupplier").show();
});
});
</script>
syle.css看起來像；
.myorders,
.mysupplier{
font-size: 25px;
display: none;
}
在我使用普通數據之前，這非常有效；
<body>
{%block content %}
<button class="button_order" >ORDERS</button>
<button class="button_supplier" >SUPPLIER</button>
<p class="myorders" >
This is my order
</p>
<p class="mysupplier">
my supplier is cool
</p>
</body>
但是，當我嘗試從我的數據庫中將數據用於<p class="mysupplier">或<p class="myorders" >時，隱藏屬性不再起作用，如下圖所示。
<p class="myorders">
{% for element in orders %}
{% for key,val in element.items %}
<ul><li>{{key}}:{{val}}</li></ul>
{% endfor %}
<hr class="new1">
{% endfor %}
</p>
僅當單擊ORDER按鈕時，我才應該從數據庫中獲取訂單數據，但我的服務器甚至無需單擊按鈕即可顯示之前的所有數據。 如何維護隱藏和顯示我的數據的屬性。
我的views.py看起來像
from django.shortcuts import render
client = MongoClient("mongodb://localhost:27017/")
db=client.inventory_data
def home(request):
collection_data_1 = db['orders']
orders = list(collection_data_1.find())
collection_data_2= db['suppliers']
suppliers = list(collection_data_2.find())
return render(request,'home.html',{'orders': orders,'suppliers':suppliers})
1 個解決方案
解決方案1
0 2022-07-05 07:57:21
渲染模板時執行模板中的循環。 您將所有數據從視圖傳遞到模板。 如果您只想將其從顯示中隱藏，請添加到您的 js：
<script>
$(document).ready(function(){
$(".mysupplier").hide();
$(".myorders").hide();
$(".button_order").click(function(){
$(".myorders").show();
$(".mysupplier").hide();
});
$(".button_supplier").click(function(){
$(".myorders").hide();
$(".mysupplier").show();
});
});
</script>
但是如果您想通過按下按鈕從 db 動態獲取當前數據，我建議使用 htmx ( htmx.org )
如何在Django for循環中顯示/隱藏特定元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.