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

Posted 2023-02-24

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

【英文标题】：How can change the color of like button and increase by one when hit the like button in Django using ajax

【发布时间】：2021-05-30 05:49:46

【问题描述】：

我发现当按钮点击并在 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
            
        
    )
)

【参考方案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>

【讨论】：

感谢您在我点击更多时回答此代码我得到更多喜欢，我的意思是当我点击一次数字 +1 时再次点击数字 -1 并再次感谢您

嗨，因为我设置了"liked": true，如果你有"liked": false，它会改变。我不能在这里复制它，因为它们是从后端动态生成的。您可以在最后测试该结果:)

当您的response.liked 为假时，这将执行else if (response.liked == false) ..，因此它会将颜色变为黑色并从总数中减去 1。