Question

我在一个项目的注释部分列出了用户上传的每张图片。 jQuery用于切换视图评论按钮并显示与该图片相关的评论。 AJAX请求从数据库中获取数据。评论部分包含评论和用于发布新评论的表单。

现在的问题是，当我打开图片一的注释部分，然后打开图片二的注释部分，然后在图片一上注释时，它将注释添加到图片二。

JQUERY:
var array1,array2,iden,value,repeat;
function fetching(iden){
  value= iden.data("id");
$.ajax({
  url: "{% url 'fetchertwo' %}",
  type: "GET",
  data: {
    'search': value
  },
  dataType: 'json',
  success: function(data) {
   array1 = data.content;
   array2 = data.author;
   const comments = [];
  $.each(array1, function(i, item) {
    comments.push('<p  style="margin:0px;" class="paratwo">' + '<strong>'+array1[i]+'</strong>'+ ' ' + 'said' +' '+ array2[i] + '</p>');
  });
  iden.find('.comments').html(comments.join(''));
   }
});
}
// ##################################
$('.headingone').click(function(event){
  event.preventDefault();
  iden = $(this).next()
    $(this).next().toggle("slide");
    fetching(iden)


 });
 $(".formtwo").each(function(e) {
   $(this).on("submit", function(event) {
     event.preventDefault();
     console.log(iden)
     var formData = $(this).serialize();
     $.post("/usercreation/picomment/" + value, formData,
     function(response) {
       fetching(iden)

       console.log(iden)
       });
   this.reset();

     });
   });
```

```
HTML
  <a style="text-decoration:underline;color:black;margin:10px;" href="" class="headingone" data-id={{item.pk}} data-target="#{{item.pk}}" >View Comments</a>
                <div class="menu" id="{{item.pk}}" data-id={{item.pk}} style="display:none">
                  <div class="comments">
                  {% for i in item.piccomments.all %}
                    <p class="paratwo"></p>
                  {% endfor %}
                    </div>
                  <form  class="formtwo" method="post" action="">
                    {% csrf_token %}
                    <div class="form-group">
                      <div class="row">
                        <div class="col-6">
                          <input data-id={{item.pk}} autocomplete="off"  type="text" name="commentadd" class="form-control commentadd" placeholder="Add Comment">
                        </div>
                        <div>
                          <input class="btn btn-outline-dark" type="submit" name="submit" value="Submit">
                        </div>
                      </div>
                    </div>
                  </form>
                </div>


```

单一表格类|多个要素| jQuery提交

0 个答案: