我正在為社交網路型別的網站創建一種喜歡的方法。目前，我可以通過每次用戶喜歡它時重新加載整個頁面來更新喜歡計數。但與其他網站一樣，它沒有這種效果。我想消除重新加載，但我無法做到。我嘗試了一個異步呼叫，但它只適用于第一個元素，我不知道如何繼續消除這種更新方法。
每張卡片的 HTML：
<div class="col-sm-12 col-md-8 offset-md-2 mt-5 p-0 post-container">
<div class="media pt-3 pl-3 pb-1">
<a href="{% url "users:detail" post.user.username %}">
<img class="mr-3 rounded-circle" height="35" src="{{ post.profile.picture.url }}" alt="{{ post.user.get_full_name }}">
</a>
<div class="media-body">
<p style="margin-top: 5px;">{{ post.user.get_full_name }}</p>
</div>
</div>
<img style="width: 100%;" src="{{ post.photo.url }}" alt="{{ post.title }}">
<p class="mt-1 ml-2" >
<a style="color: #000; font-size: 20px;" id="like_heart" data-id="{{ post.pk }}" data-url="{% url 'posts:likes2' %}">
<i class="{% if request.user in post.likes_users.all %} fas fa-heart {% else %} far fa-heart {% endif %}"
id="success_like"></i>
</a> <i id="value_like">{{ post.likes_users.count }}</i>
</p>
<p class="ml-2 mt-0 mb-2">
<b>{{ post.title }}</b> - <small>{{ post.created }}</small>
</p>
</div>
AJAX 呼叫：
$(document).ready(function(){
// ajax for call in post
$("#like_heart").on("click",function(e){
// e.preventDefault();
var id = $(this).data("id");
$.ajax({
// url: 'posts/likes2/',
url: $(this).data("url"),
data: {
'pk': id
},
dataType: 'json',
success: function (data) {
if (data['like']) {
$('#success_like').removeClass("far fa-heart").addClass("fas fa-heart");
}
else {
$('#success_like').removeClass("fas fa-heart").addClass("far fa-heart");
}
var body = '<i id="value_like">' data['value'] '</i>'
$('#value_like').html( body );
}
});
})
})
看法：
def likes_view(request):
pk = request.GET.get('pk', None)
post_id = Posts.objects.get(pk=pk)
likes_users = User.objects.get(username=request.user)
if post_id.likes_users.filter(username=request.user).exists():
post_id.likes_users.remove(likes_users)
else:
post_id.likes_users.add(likes_users)
data = {'like': post_id.likes_users.filter(username=request.user).exists(), 'value': post_id.likes_users.count()}
return JsonResponse(data)
uj5u.com熱心網友回復：
問題在于具有相同的多個 DOM 元素id，這不僅違反了 HTML 規范，而且讓您沒有機會找到想要的#value_like。
你可以像這樣修復它，模板：
<div class="media pt-3 pl-3 pb-1">
<a href="{% url "users:detail" post.user.username %}">
<img class="mr-3 rounded-circle" height="35" src="{{ post.profile.picture.url }}" alt="{{ post.user.get_full_name }}">
</a>
<div class="media-body">
<p style="margin-top: 5px;">{{ post.user.get_full_name }}</p>
</div>
</div>
<img style="width: 100%;" src="{{ post.photo.url }}" alt="{{ post.title }}">
<p class="mt-1 ml-2" >
<a style="color: #000; font-size: 20px;" class="like-link" data-id="{{ post.pk }}" data-url="{% url 'posts:likes2' %}">
<i class="{% if request.user in post.likes_users.all %} fas fa-heart {% else %} far fa-heart {% endif %} like-toggle" data-id="{{ post.pk }}"></i>
</a> <i class="like-count" data-id="{{ post.pk }}">{{ post.likes_users.count }}</i>
</p>
<p class="ml-2 mt-0 mb-2">
<b>{{ post.title }}</b> - <small>{{ post.created }}</small>
</p>
JS：
$(document).ready(function() {
// ajax for call in post
$(".like-link").on("click", function(e) {
// e.preventDefault();
var id = $(this).data("id");
$.ajax({
// url: 'posts/likes2/',
url: $(this).data("url"),
data: {
'pk': id
},
dataType: 'json',
success: function(data) {
if (data['like']) {
$('.like-toggle[data-id=' id ']').removeClass("far fa-heart").addClass("fas fa-heart");
} else {
$('.like-toggle[data-id=' id ']').removeClass("fas fa-heart").addClass("far fa-heart");
}
var body = '<i id="value_like">' data['value'] '</i>'
$('.like-count[data-id=' id ']').html(body);
}
});
})
})
我data-id為您需要使用的每個元素添加了屬性。現在我使用classes 和 that訪問它們data-id。抱歉，我無法自己測驗它，但即使我有一個型別，你也明白了。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/407050.html
標籤：