如何将“{&x27；c like'；：'；99'；，'；count'；：1}”转换为类似颜色的按钮，并在Django中对类似按钮进行计数

如何将这些数据转换为可见的东西例如，如果我点击like按钮，增加likes+1，如果我再次点击，则将按钮更改为红色。减少-1并更改颜色

我的观点

def like_comment(request):
id = request.POST.get('like_id')
comment = Comment.objects.get(id=id)
data = {}
if request.POST.get('action') == 'add_like':
    account = request.user
    if comment.likes.filter(id=account.id).exists():
        comment.likes.remove(account)
        c_like = False
    else:
        comment.likes.add(account)
        c_like = True

data["c_like"] = id
data["count"] = comment.likes.count()
print(data)
return JsonResponse(data)

我的模板（Html）

---

您可以使用

数据属性

检查是否添加或删除按钮的颜色，还可以在函数中传递

此

，以识别单击的按钮。然后，在“检查

数据属性

是否有添加或删除值”的成功函数中，根据此操作可以更改颜色，也可以更改总计数的值

您可以在django代码中进行的更改：

 {% if not request.user in node.likes.all %}  
   //pass `this` as well.. also add some attr   
    <button style="color: #aaaaaa;" onclick="addLikeToComment('{{ node.id }}',this)"  class="remove-default-btn  p-0 border-0 " type="submit"  style="border: none; color: #aaaaaa;" data-text="add">    
        <svg  width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16" >
          //some codes
        <span class="ml-1"  id="span_like">{{ node.likes.all.count }}</span></svg>
     </button>
      {% else %}
    
    <button style="color: red;"  onclick="addLikeToComment('{{ node.id }}',this)" class="remove-default-btn btn btn-dinger p-0 border-0 " type="submit" class="remove-default-btn like-btn{{ request.path }}" style="border: none; color: #aaaaaa;" data-text="remove">
            //somecodes
       <span class="ml-2">{{ node.likes.count }}</span></svg>
    </button>
  {% endif %}

13
17

谢谢你，你是我帮助的救命恩人：）

  function addLikeToComment(id) {
 console.log(id)
 var form = $(this);
 btn = document.getElementsByClassName('comlike')
 $.ajax({
   type: 'POST',
   url: '{% url "video:like_comment" %}',
   data: {
     like_id: id,
     action: 'add_like',
     csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
   },
   success: function (response) {

     if (response.c_like) {
         $("#" + json['c_like']).css("color", "red");
     } else {
           $("#" + json['c_like']).css("color", "#aaaaaa");

     }
      $("#span_like").text(response.c_like.count)
     console.log(response);
      },
 })
}

 {% if not request.user in node.likes.all %}  
   //pass `this` as well.. also add some attr   
    <button style="color: #aaaaaa;" onclick="addLikeToComment('{{ node.id }}',this)"  class="remove-default-btn  p-0 border-0 " type="submit"  style="border: none; color: #aaaaaa;" data-text="add">    
        <svg  width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16" >
          //some codes
        <span class="ml-1"  id="span_like">{{ node.likes.all.count }}</span></svg>
     </button>
      {% else %}
    
    <button style="color: red;"  onclick="addLikeToComment('{{ node.id }}',this)" class="remove-default-btn btn btn-dinger p-0 border-0 " type="submit" class="remove-default-btn like-btn{{ request.path }}" style="border: none; color: #aaaaaa;" data-text="remove">
            //somecodes
       <span class="ml-2">{{ node.likes.count }}</span></svg>
    </button>
  {% endif %}