如何在DjangoJavaScript中打开编辑部分而不刷新每篇文章的页面？

这是我的html模板：

<div class="posts">
  <h3> <a href ="{% url 'profile' p.user.id %}"> {{p.user}}: </a> </h3> <p>{{p.timestamp}}</p>
    <br>
<p><i class="fas fa-heart"></i> {{ p.likes.count }}</p>
<p style="text-align: center;"> {{ p.post }} </p> 
{% if p.user.id == user.id %}
<button class="btn btn-primary edit" style="display: inline;">Edit</button><hr></div>
<div id="editsec">
<textarea rows=6 cols=100 style="opacity: 0.7;">{{p.post}} </textarea>
<form action=""><button class="btn btn-success">Save</button></form>
 </div>
 {% endif %}  
   {% endfor %}

{{p.timestamp}}



{{p.likes.count}

{{p.post}
{%if p.user.id==user.id%}
编辑

{{p.post}}
拯救
{%endif%}
{%endfor%}

现在在css中，我隐藏了editsec，因此只有当用户单击edit按钮时，它才会显示editsec div并隐藏posts div。下面是Javascript代码：

      document.addEventListener('DOMContentLoaded', function() {
var edit = document.getElementsByClassName('edit')
for (var i = 0 ; i < edit.length; i++) {
edit[i].addEventListener('click', () => {
    document.getElementById('editsec').style.display = "block"; 
    document.querySelector('.posts').style.display = "none"; 
});
  }
 });  

document.addEventListener（'DOMContentLoaded'，function（）{
var edit=document.getElementsByClassName（'edit'）
对于（变量i=0；i{
document.getElementById（'editsec'）.style.display=“block”；
document.querySelector（'.posts'）.style.display=“无”；
});
}
});  

现在，如果我在主页上有两篇文章，如果我点击第二篇文章的编辑按钮，它仍然显示第一篇文章的editsec div

我尝试将此editsec设置为一个类，并执行了以下操作：

document.addEventListener('DOMContentLoaded', function() {
var edit = document.getElementsByClassName('edit')
var editsec = document.getElementsByClassname('editsec')
for (var i = 0 ; i < edit.length; i++) {
edit[i].addEventListener('click', () => {
   for (var a = 0 ; a < edit.length; a++) {
    editsec[a].style.display = "block"; 
    document.querySelector('.posts').style.display = "none"; 
   }
});
  }
 });  

document.addEventListener（'DOMContentLoaded'，function（）{
var edit=document.getElementsByClassName（'edit'）
var editsec=document.getElementsByClassname（'editsec'）
对于（变量i=0；i{
对于（var a=0；a

---

现在，如果我单击一个编辑按钮，它将显示所有的editsec div，如何使它仅显示此特定帖子的编辑部分？

我在创建帖子网站时也遇到了这个问题。 最好的办法就是这样。是给按钮和编辑div一个id，就像给按钮和div一个data id=“{p.id}}”一样

在javascript中，只需获取button dataset.id并仅在button dataset.id与div dataset.id相同时显示，然后显示该div

另外，你正在做CS50网站，因为它有一个类似的项目。 这是我的

如果你不做CS50网站，我会推荐给你。

---

这是哈佛大学的一门很棒的课程。

如果你想创建动态内容，不要把它放在模板中，而是放在你的js代码中

我建议您不要在views.py中呈现模板，而是1）返回帖子的json响应

2）在js代码中获取帖子的数据，并创建一个用于显示帖子的元素，使用

             document.QuerySelecctor(".posts").innerHtml = data

3）现在添加编辑部分，如下所示：

        const bigsection = document.createElement('div');
        bigsection.id = `button-div-${post.id}`;
        // make this section hidden until user clicks the edit button
            const editsec = document.createElement('div');
            editsec.style.display = 'none'; 
            editsec.id = `edit-div-${post.id}`; Now you give each of your section different id accordingly.
            let form = `<textarea class="form-control" id="content-${post.id}" name="post_content">`
                + `${post.content}</textarea>;
            editsec.innerHTML = form; // now changed the content of your div
        }

const bigsection=document.createElement（'div'）；
bigsection.id=`button div-${post.id}`；
//将此部分隐藏，直到用户单击“编辑”按钮
const editsec=document.createElement（'div'）；
editsec.style.display='none'；
editsec.id=`edit div-${post.id}`；现在，您可以相应地为每个分区指定不同的id。
设形式=``
+`${post.content}；
editsec.innerHTML=form；//现在更改了div的内容
}

---

将按钮添加到事件侦听器中，就像用户单击按钮时所做的那样，它将显示动态内容。

这可能有助于解决您的问题