javascript - 如何在 Django Javascript 中打开编辑部分而不刷新每个帖子的页面？

Question

这是我的 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 %}

现在在CSS中我隐藏了editsec，所以只有当用户单击编辑按钮时，它才会显示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"; 
});
  }
 });  

现在，如果我在主页上有两个帖子，如果我单击第二个帖子的编辑按钮，它仍然显示第一个帖子的 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"; 
   }
});
  }
 });  

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

Answer 1

如果您想创建动态内容，请不要将其放在模板中，而是放在 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
        }

将按钮添加到事件监听器，就像您已经这样做的那样，当用户单击按钮时，它将显示动态内容。