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

像这样更改你的代码在click事件中声明post-id。并使用querySelectorAll()更改选择器。还可以使用addEventListener()代替普通click

工作示例

＆＃13;

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'
  })
})

＆＃13;

<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>

＆＃13;

关于javascript onclick foreach函数

1 个答案: