如何在Django模板循环中选中特定HTML元素实现局部编辑切换

核心问题在于你在循环中重复使用了相同的id——HTML规范要求页面内id必须唯一，这也是querySelector只会选中第一个匹配元素的原因。不需要额外循环处理每个元素的隐藏，只需通过点击按钮定位到它所在的帖子容器，仅操作该容器内的元素即可。

步骤1：修正HTML结构（去掉重复id） #

把循环中重复的id全部替换为类，同时用data-*属性存储帖子ID（更语义化）：

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

步骤2：修改JavaScript逻辑（精准定位容器内元素） #

通过点击的按钮找到所在的帖子容器，所有显示/隐藏操作都基于这个容器，不会影响其他帖子：

document.addEventListener('DOMContentLoaded', function(){
    // 初始化隐藏所有编辑框和保存按钮
    document.querySelectorAll('.edit_area, .save_btn').forEach(el => {
        el.style.display = 'none';
    });

    // 给所有编辑按钮绑定点击事件
    document.querySelectorAll('.edit_button').forEach(button => {
        button.addEventListener('click', function() {
            // 定位当前按钮所在的帖子容器
            const postContainer = this.closest('.individual_posts');
            const postId = this.dataset.postId;

            // 隐藏当前帖子的内容、时间、点赞
            postContainer.querySelector('.post_itself').style.display = 'none';
            postContainer.querySelector('.date_and_time').style.display = 'none';
            postContainer.querySelector('.likes').style.display = 'none';

            // 显示当前帖子的编辑框和保存按钮
            const editArea = postContainer.querySelector('.edit_area');
            const saveBtn = postContainer.querySelector('.save_btn');
            editArea.style.display = 'block';
            saveBtn.style.display = 'block';

            // 获取原帖子内容填充到编辑框
            fetch(`/edit/${postId}`)
            .then(response => response.json())
            .then(post => {
                editArea.value = post.post; // textarea用value设置内容更规范
            });

            // 绑定保存按钮的单次点击事件（避免重复绑定）
            saveBtn.onclick = function() {
                const updatedPost = editArea.value;
                // 带上Django必需的CSRF令牌
                const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
                
                fetch(`/edit/${postId}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrfToken
                    },
                    body: JSON.stringify({
                        post: updatedPost
                    })
                })
                .then(response => {
                    if (response.ok) {
                        // 保存成功后恢复显示原内容区域，隐藏编辑组件
                        postContainer.querySelector('.post_itself').textContent = updatedPost;
                        postContainer.querySelector('.post_itself').style.display = 'block';
                        postContainer.querySelector('.date_and_time').style.display = 'block';
                        postContainer.querySelector('.likes').style.display = 'block';
                        editArea.style.display = 'none';
                        saveBtn.style.display = 'none';
                    }
                });
            };
        });
    });
});

对你问题的直接回答 #

不需要像DOM加载时那样用循环处理每个元素的隐藏。只需在点击编辑按钮时，通过closest()方法定位到当前帖子的容器，针对容器内的元素单独切换显示状态即可——这种方式更高效，且不会干扰其他帖子的元素。

内容的提问来源于stack exchange，提问作者econo