javascript - 关于 javascript onclick foreach 函数

Question

我想为特定帖子 ID 的 foreach 帖子显示表单 onclick 函数。我正在尝试这样做，但它不起作用。

 {% for post in posts %}

            <div post-id="{{ post.id }}" class="post-box
            w3-container w3-card-2 w3-white w3-round w3-margin"><br>
            {# <img src="w3images/avatar6.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px"> #}
            <span class="w3-right w3-opacity">{{ post.created }}</span>
            <h4>{{ user.name }}</h4><br>
            <hr class="w3-clear">
            <p><a href="/posts/{{ post.id }}">{{ post.title }}</a></p>
            {# <img src="w3images/nature.jpg" style="width:100%" class="w3-margin-bottom"> #}
            <p>{{ post.description }}</p>
            <button type="button" class="w3-button w3-theme-d1 w3-margin-bottom"><i class="fa fa-thumbs-up"></i>  Like</button>
            <button class="w3-button w3-theme-d2 w3-margin-bottom" id="comment"><i class="fa fa-comment"></i>Comment</button>
            <div id="comment-form-{{ post.id }}" style="display: none;">
                <textarea></textarea>
                <button type="button"></button>
            </div>
        </div>

       {% endfor %}


<script>
      var postBoxes = document.getElementsByClassName('post-box')
       postBoxes.forEach(function (postBox) {
      var postId = postBox.getAttribute('post-id')
      postBox.onclick = function () {
        document.getElementById('comment-form-' + postId).style.display = 'block'
    }
})
 </script>

Answer 1

像这样更改代码，在单击事件中声明 post-id。并使用 querySelectorAll() 更改选择器.并且还可以与 addEventListener() 一起使用而不是正常的点击

工作示例

var postBoxes = document.querySelectorAll('.post-box')
postBoxes.forEach(function(postBox) {

  postBox.addEventListener('click', function() {
    var postId = this.getAttribute('post-id')
  console.log(postId)
    document.getElementById('comment-form-' + postId).style.display = 'block'
  })
})

<div post-id="{{ post.id }}" class="post-box
            w3-container w3-card-2 w3-white w3-round w3-margin"><br> {# <img src="w3images/avatar6.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px"> #}
  <span class="w3-right w3-opacity">{{ post.created }}</span>
  <h4>{{ user.name }}</h4><br>
  <hr class="w3-clear">
  <p><a href="/posts/{{ post.id }}">{{ post.title }}</a></p>
  {# <img src="w3images/nature.jpg" style="width:100%" class="w3-margin-bottom"> #}
  <p>{{ post.description }}</p>
  <button type="button" class="w3-button w3-theme-d1 w3-margin-bottom"><i class="fa fa-thumbs-up"></i>  Like</button>
  <button class="w3-button w3-theme-d2 w3-margin-bottom" id="comment"><i class="fa fa-comment"></i>Comment</button>
  <div id="comment-form-{{ post.id }}" style="display: none;">
    <textarea></textarea>
    <button type="button"></button>
  </div>
</div>