如何从Django模板中的for循环中选择一个特定的HTML元素?

Question

我试图创建一个按钮，该按钮隐藏并仅显示通过JavaScript与它在同一div中的特定HTML元素。所有div都在一个Django模板内循环并显示不同的信息。现在，我使用querySelector来选择id，但这是不正确的，因为它选择它找到的具有该id的第一个元素。

html:

<div>
{% for post in page_obj.object_list %}
<div class = "individual_posts">
<a href="{% url 'username' post.user %}"><h5 id="p_user" class = "post_user">{{ post.user }}</h5></a>
<h6 id = "post_itself">{{ post.post }}</h6>
<h6 id="date_and_time" class = "post_elements">{{ post.date_and_time }}</h6>
<h6 id="likes" class = "post_elements">{{ post.likes }}&#x1F44D;</h6>
{% if post.user == request.user %}
<button class="edit_button" value="{{ post.id }}">Edit</button>
{% endif %}
<textarea class="textarea" id="edit_area"></textarea>
<button class="edit_save" id="save">Save</button>
</div>
{% endfor %}
</div>

javascript:

document.addEventListener('DOMContentLoaded', function(){
//hide the textarea
const editingTextareas = document.querySelectorAll(".textarea");
for (const textarea of editingTextareas){
textarea.style.display = 'none';
}
//hide the save buttons for the textarea
const saveButtons = document.querySelectorAll(".edit_save");
for (const s_button of saveButtons){
s_button.style.display = 'none';
}
//adds the click to the edit buttons
const editButtons = document.querySelectorAll('.edit_button');
for (const button of editButtons) {
id = button.value;
button.addEventListener('click', () => edit_email(id));
}
});

function edit_email(id){
document.querySelector('#post_itself').style.display = 'none';
document.querySelector('#date_and_time').style.display = 'none';
document.querySelector('#likes').style.display = 'none';
const edit_area = document.querySelector('#edit_area');
edit_area.style.display = 'block';
const save = document.querySelector('#save');
save.style.display = 'block';
//get post
fetch(`/edit/${id}`)
.then(response => response.json())
.then(post => {
edit_area.innerHTML = `${post.post}`;
})
//save the post
fetch(`/edit/${id}`,{
method: 'POST',
post: JSON.stringify({
post: edit_area.value
})
})
}

我将不得不运行每个HTML元素通过一个for循环，就像我做的DOM是第一次加载隐藏按钮?

Answer 1

为多个元素共享相同的id。根据MDN，

文档方法querySelector()返回文档中与指定的选择器或选择器组匹配的第一个元素

要解决这个问题，可以将post ID附加到元素ID后，这样每个ID都是唯一的，可以单独查询。例如<h6 id = "post_itself-{{post.id}}">{{ post.post }}</h6>，那么JS端应该是:

document.querySelector(`#post_itself-${id}`).style.display = 'none';

对所有重复的id执行此操作。我建议您将元素存储在变量中，这样您就不必重复查询相同的元素

const postItselfEl = document.querySelector(`#post_itself-${id}`)