#javascript #html #css
Вопрос:
Я создаю приложение CRM и пытаюсь удалить определенного клиента при нажатии кнопки подтверждения во всплывающем режиме, но он всегда удаляет первого клиента. Я знаю, что это произошло из-за неоднозначного имени класса, и проблема может быть решена путем добавления уникального идентификатора для каждого клиента? Я искал этот тип проблемы, но все еще не знал, как ее решить. Поскольку я сгенерировал каждого клиента циклом for, и мне, возможно, потребуется динамически создавать уникальный идентификатор для каждого клиента, вызывать конкретный идентификатор в javascript и изменять соответствующий CSS? Я чувствую, что этот способ может быть слишком сложным. Существуют ли какие-либо другие методы для достижения моей цели? Спасибо.
function clientmodal() {
document.querySelector('.modal-bg').style.visibility = 'visible';
document.querySelector('.modal-bg').style.opacity = '1';
}
function clientcancel() {
document.querySelector('.modal-bg').style.visibility = 'hidden';
document.querySelector('.modal-bg').style.opacity = '0';
} .modal-bg {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s;
}
.delete-modal {
background-color: white;
border-radius: 10px;
width: 30%;
height: 13%;
align-items: center;
}
.modal-title {
text-align: center;
margin-top: 15px;
} <!-- client table -->
{% for user in clients %}
<tr class="mt-3">
<td class="pt-3">{{ user.level }}</td>
<td class="pt-3"><a href="{% url 'clients' user.id %}">{{ user.first_name }}</a></td>
<td class="pt-3">{{ user.last_name }}</td>
<td class="pt-3">{{ user.country }}</td>
<td class="pt-3">{{ user.contact }}</td>
<td class="pt-3">{{ user.contact_number }}</td>
<!-- <td><a href="#" class="btn btn-outline-primary btn-sm">Client Info</a> -->
<td><a href="{% url 'update' user.id %}" class="btn btn-outline-warning">Update</a>
<a class="btn btn-outline-danger" onclick="clientmodal()">Delete</a></td>
</tr>
<!-- client modals -->
<div class="modal-bg">
<div class="delete-modal">
<div class="modal-title">
<h3>Are you sure you want to delete this client?</h3>
</div>
<div class="modal-footer">
<a type="button" class="btn btn-secondary cancel" onclick="clientcancel()">Cancel</a>
<a href="{% url 'delete' user.id %}" class="btn btn-danger">Yes</a>
</div>
</div>
</div>
{% endfor %} Комментарии:
1. Я сделал тебе отрывок. Это не вопрос, связанный с Джанго. Пожалуйста, отредактируйте фрагмент и добавьте 3 ОТРИСОВАННЫЕ строки в обычном HTML
Ответ №1:
document.querySelector() найдите один элемент, и когда он найдет один из них, он удалит его.
В вашем случае есть несколько строк с параметром поиска, поэтому он найдет более одного элемента, но всегда выберет первый.
Итак, вы должны идентифицировать строку с помощью идентификатора. Например, вы можете сделать:
<tr class="mt-3" id="line-user-{{ user.id }}">
<td class="pt-3">{{ user.level }}</td>
<td class="pt-3">all others TDs</td>
</tr>
var item = document.querySelector('#line-input-' userId);
item.style.visibility = 'hidden';
item.style.opacity = '0';
Ответ №2:
Несколько вещей
Пожалуйста, изучите приведенный ниже код
- Я переместил модал за пределы цикла и отправил ему идентификатор пользователя при доступе к строке
- Я переместил видимость с CSS на a .скрыть класс
- Я добавляю и удаляю этот класс
- Я использую делегирование из тела таблицы, которое также содержит идентификатор пользователя в атрибуте данных
Я рекомендую вам не использовать hrefs, которые удаляют данные. Один визит бота Google удалит вашу базу данных пользователей. Вместо этого используйте ajax, где я прокомментировал
const modal = document.querySelector('.modal-bg');
const modalLink = modal.querySelector(".confirm");
let currentRow;
document.getElementById("tb").addEventListener("click", function(e) {
const tgt = e.target;
const parent = e.target.closest("tr");
const id = parent.dataset.userid;
currentRow = parent;
if (tgt.classList.contains("delete")) {
e.preventDefault()
modal.classList.remove("hide");
modalLink.href = `{{ url }}?id=${id}`;
}
});
modal.addEventListener("click", function(e) {
// e.preventDefault(); // here you REALLY should ajax
if (currentRow amp;amp; e.target.classList.contains("confirm")) currentRow.remove()
modal.classList.add("hide");
}) .modal-bg {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
transition: visibility 0s, opacity 0.5s;
}
.delete-modal {
background-color: white;
border-radius: 10px;
width: 30%;
height: 13%;
align-items: center;
}
.modal-title {
text-align: center;
margin-top: 15px;
}
.hide {
visibility: hidden;
opacity:0;
} <table>
<tbody id="tb">
<tr class="mt-3" data-userid="{% user.id %}">
<td class="pt-3">1</td>
<td class="pt-3"><a href="">A1</a></td>
<td class="pt-3">B1</td>
<td class="pt-3">C1</td>
<td class="pt-3">D1</td>
<td class="pt-3">E1</td>
<td><a href="{% url 'update' user.id %}" class="btn btn-outline-warning">Update</a>
<a class="btn btn-outline-danger delete">Delete</a></td>
</tr>
<tr class="mt-3" data-userid="{% user.id %}">
<td class="pt-3">2</td>
<td class="pt-3"><a href="">A2</a></td>
<td class="pt-3">B2</td>
<td class="pt-3">C2</td>
<td class="pt-3">D2</td>
<td class="pt-3">E2</td>
<td><a href="{% url 'update' user.id %}" class="btn btn-outline-warning">Update</a>
<a class="btn btn-outline-danger delete">Delete</a></td>
</tr>
</tbody>
</table>
<!-- client modals -->
<div class="modal-bg hide">
<div class="delete-modal">
<div class="modal-title">
<h3>Are you sure you want to delete this client?</h3>
</div>
<div class="modal-footer">
<a type="button" class="btn btn-secondary cancel">Cancel</a>
<a href="" class="btn btn-danger confirm">Yes</a>
</div>
</div>
</div>