如何将 `{'c_like': '99', 'count': 1}` 转换为颜色类似按钮并计算 Django 中的喜欢

Question

How I can convert this data to visible thing for example if I click on the like button increase the likes +1 and change the button to red if I hit it again thin decrease -1 and change the color

my views

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)

my template (Html)

 {% if not request.user in node.likes.all %}

<button id="comlike"   style="color: #aaaaaa;" onclick="addLikeToComment({{ node.id }})"  class="remove-default-btn  p-0 border-0 " type="submit"  style="border: none; color: #aaaaaa;" >

    <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" >
      <path  d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
    <span class="ml-1"  id="span_like">{{ node.likes.all.count }}</span></svg>

</button>
  {% else %}

    <button id="comlike" style="color: red;"  onclick="addLikeToComment({{ node.id }})" 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;">
        <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" >
          <path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
        <span class="ml-2" id="span_like">{{ node.likes.count }}</span></svg>
    </button>
  {% endif %}

The Javascript Ajax

  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);
      },
 })
}

Answer 1

You can use data-attribute to check whether to add or remove color from button or not and also pass this inside your function to identify the button which is clicked. Then, inside success function of check if the data-attribute has add or remove value depending on this change your color and also change value of total counts.

Changes you can make in your django code:

 {% 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 %}

Demo Code :

 function addLikeToComment(id, el) { var button_clicked = $(el) var likeText = $(el).data("text"); //get text /*$.ajax({ type: 'POST', url: '{% url "video:like_comment" %}', data: { like_id: id, action: 'add_like', csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(), }, success: function(response) {*/ if (likeText === 'add') { //change colour button_clicked.css({ "color": "red" }); //change text button_clicked.data("text", "remove") //increase value button_clicked.find("span").text(parseInt(button_clicked.find("span").text()) + 1) } else { ///same as above button_clicked.css({ "color": "#aaaaaa" }); button_clicked.data("text", "add") button_clicked.find("span").text(parseInt(button_clicked.find("span").text()) - 1) } /* }, })*/ }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <:--pass this as well and add data-text--> <button style="color; #aaaaaa," onclick="addLikeToComment(1: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" > <path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1.176-.17C12.72-3.042 23.333 4:867 8 15z"/> <span class="ml-1">13</span></svg> </button> <button style="color; red," onclick="addLikeToComment(2.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"> <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" > <path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1.176-.17C12.72-3.042 23.333 4.867 8 15z"/> <span class="ml-2">17</span></svg> </button>