僅當單擊第一個按鈕時才會顯示 div。它可以按我的意愿作業，但僅適用于回圈中的第一個按鈕。當我手動放置 display = "block" 時，它出現在 bith 回圈上。我想要的是通過單擊類“editTime”來切換類“bg-model”。
任何幫助，將不勝感激。提前致謝...
HTML
<h4>Appointments</h4>
{% if upcomming_appointments %}
{% for d in upcomming_appointments %}
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<h6 class="mb-0">
<ion-icon name="medkit"></ion-icon> Appointment with <strong>{{d.PatientName}}</strong><a class="btn btn-info "
id="sessionBtn" href="{% url 'medicalReport' d.id %}">Start Session</a>
</h6>
<span class="text-secondary">
Date: <strong>{{d.appoitmentDate}}</strong> <br>
Time: <strong>{{d.appoitmentTime}}</strong><br>
Symptoms: <strong>{{d.symptoms}}</strong><br>
Comment: <strong>{{d.Comments}}</strong><br>
</span>
<a id = "changeTime" class="editTime">Change time</a>
<a class="btn btn-info " id="logoutBtn" href="{% url 'delete_appointment' d.id %}"
onclick="return confirm('Are you sure you want to cancel this appointment? This action is irreversible.')">Cancel
Appoitment</a>
<div class="bg-modal">
<div class="modal-contents">
<div class="close"> </div>
<form method="POST">
<h5>Change Appointment Time</h5>
{{d.id}}
<input type="hidden" name="SessionID" value="{{d.id}}">
<input type="time" id="timeChange" class="input" placeholder="Time">
<button type="submit" class="loginBtn">Submit</button>
</form>
</div>
</div>
</li>
JS
document.querySelector('.editTime').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "flex";
});
document.querySelector('.close').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "none";
});
視圖.py
def doctorProfile(request):
upcomming_appointments = Appoitment.objects.all().filter(
DoctorEmail=request.user, appoitmentDate__gte=timezone.now()).order_by('appoitmentDate')
past_appointments = Appoitment.objects.all().filter(
DoctorEmail=request.user, appoitmentDate__lt=timezone.now()).order_by('-appoitmentDate')
g = request.user.groups.all()[0].name
if g == 'Doctor':
doctor_details = Doctor.objects.all().filter(EmailAddress=request.user)
d = {'doctor_details': doctor_details,
'upcomming_appointments': upcomming_appointments,
'past_appointments': past_appointments}
return render(request, 'doctorProfile.html', d)
uj5u.com熱心網友回復：
您的模板有問題。發生這種情況是因為 HTML id 是嚴格唯一的，并且由于您正在回圈，因此 id“changetime”被重復，因此只有第一個按鈕在作業。
解決方法是首先，通過添加一個變數使 ID 唯一，它可能類似于 id="changeTime_{{d.id}}" 或者如果 ID 沒有在任何地方使用，您可以完全洗掉它. 其次，您將 onClick 處理程式添加到標記。
您可以執行以下操作：
<a href id="your_id" class="editTime" onclick="showModal()">
在你的 js 檔案中：
function showModal() {
document.querySelector('.bg-modal').style.display = "flex";
}
編輯：
確保將您的模式放在 for 回圈之外
由于您還想更新模態框的欄位，因此您必須通過 javascript 使用它。改變你的模態如下：
<div class="bg-modal">
<div class="modal-contents">
<div class="close"> </div>
<form method="POST">
<h5>Change Appointment Time</h5>
<span id="appId"></span>
<input type="hidden" name="SessionID" value="">
<input type="time" id="timeChange" class="input" placeholder="Time">
<button type="submit" class="loginBtn">Submit</button>
</form>
</div>
</div>
點擊功能更改：
html
<a href id="your_id" class="editTime" onclick="showModal('{{d.id}}')">
JavaScript
function showModal(appointmentId) {
document.querySelector('.bg-modal').style.display = "flex";
document.getElementByName('SessionID')[0].value = appointmentId;
document.getElementById('appId').textContent = appointmentId;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/427737.html
標籤：javascript html django for循环 django-模板
上一篇：嵌套串列中的資料清理和子集化