Как выбрать определенный элемент HTML из цикла for в шаблоне Django?

Я пытаюсь создать кнопку, которая скрывает и отображает только определенные элементы HTML, которые находятся в одном div с ней через JavaScript. Все div находятся внутри шаблона Django для цикла и отображают различную информацию. Сейчас я использую querySelector для выбора id, но это неправильно, потому что выбирается первый элемент, который он находит с этим id.

< 
<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, чтобы скрыть кнопки?

Вы используете один и тот же идентификатор для нескольких элементов. Согласно MDN,

Метод документа querySelector() возвращает первый элемент в документе, который соответствует указанному селектору или группе селекторов

.

Чтобы исправить это в вашем случае, добавьте ID поста к ID элемента, чтобы каждый ID был уникальным и мог быть запрошен отдельно. Например, <h6 id = "post_itself-{{post.id}}">{{ post.post }}</h6>, тогда на стороне JS должно быть:

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

Сделайте это для всех повторяющихся идентификаторов. Я посоветую вам хранить элемент в переменной, чтобы вам не пришлось многократно запрашивать один и тот же элемент

const postItselfEl = document.querySelector(`#post_itself-${id}`)
Вернуться на верх