使用ajax在Django中点击like按钮时如何改变like按钮的颜色并增加一

Question

我发现当按钮点击并在 Django 中使用 ajax 增加 +1（点赞数）时，我发现很难更改点赞按钮的颜色

我的 html 模板

  <form method="POST" action="{% url 'video:like' video.pk %}" id="my-like-form">
  {% csrf_token %}
  <input type="hidden" class="likin" name="next" value="{{ request.path }}">
  <button class="remove-default-btn" type="submit" id="openPopup" class="like-btn{{ request.path }}" style="border: none; ">
      <i class="fa fa-thumbs-up" aria-hidden="true"><span>{{ video.likes.all.count }}</span></i>
      Like
  </button>

JavaScript

    $("#my-like-form").submit(function(e){
    e.preventDefault(); // Prevent form submission

    let form = $(this);
    let url = form.attr("action");

    let res
    const likes = $(`.like-btn{{ request.path }}`).text();// this code stopping the function of like button from work
    const trimCount = parseInt(likes)
    $.ajax({
        type: "POST",
        url: url,
        data: form.serialize(),
        dataType: "json",
        success: function(response) {
            selector = document.getElementsByName(response.next);
            if(response.liked==true){
                $(selector).css("color","blue");
                res = trimCount - 1
            } else if(response.liked==false){
                $(selector).css("color","black");
                res = trimCount + 1
            }
        }
    })
})

Answer 1

您可以简单地使用$(this).find("button[class*=like-btn] span") 而不是在 jquery 代码中使用 jinja 代码，这将为您提供具有总喜欢计数的 span 标签，然后使用 .text() 将新计数添加到 span 标签。

演示代码：

//suppose this return from server
var response = {
  "liked": true
}
$("#my-like-form").submit(function(e) {
  e.preventDefault();
  let form = $(this);
  let url = form.attr("action");

  let res
  //get like button and then find span to get total value
  const likes = $(this).find("button[class*=like-btn] span").text();
  const trimCount = parseInt(likes)
  console.log(trimCount)
  var selector = $(this).find("button[class*=like-btn]") //to select that button
  /* $.ajax({
     type: "POST",
     url: url,
     data: form.serialize(),
     dataType: "json",
     success: function(response) {
    */
  if (response.liked == true) {
    $(selector).css("color", "blue");
    res = trimCount + 1
  } else if (response.liked == false) {
    $(selector).css("color", "black");
    res = trimCount - 1
  }
  $(selector).find("span").text(res) //add that value inside span
  /*}
  })*/
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="{% url 'video:like' video.pk %}" id="my-like-form">
  {% csrf_token %}
  <input type="hidden" class="likin" name="next" value="{{ request.path }}">
  <!--you have two clas attribute merge that in one here `1` is just for demo replace that with like-btn{{ request.path }} -->
  <button class="remove-default-btn like-btn1" type="submit" id="openPopup" style="border: none; ">
      <i class="fa fa-thumbs-up" aria-hidden="true"><span>23</span></i>
      Like
  </button>
</form>