我在一个项目的注释部分列出了用户上传的每张图片。 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>
```