只有第一个按钮在 Django 循环中有效

Question

div 仅在单击第一个按钮时出现。它按我想要的方式工作，但仅适用于循环中的第一个按钮。当我手动放置 display = "block" 时，它出现在 bith 循环上。我想要的是通过单击 class“editTime”来切换 class“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";
});

views.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)

Answer 1

您的模板有问题。发生这种情况是因为 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;
}

只有第一个按钮在 Django 循环中有效

Only the First Button works in Django loop

html

javascript

django

for-loop

django-templates