Question

我正在学习Django并创建一个功能性的Like按钮，而无需使用Ajax重新加载页面。这是我第一次接触JS。它可以正常工作，但我想在此脚本中传递html（FontAwesome），以显示图标和Likes数字。

我尝试在函数中使用“动词”参数传递它，但它只显示纯文本）。我还尝试将html代码捕获为var（来自StackOverflow的类似问题），但对我不起作用（它显示[object Object]）。我想我做错了。代码如下：

<script>
var HtmlHeart = $(this).children("i").attr("class", "fas fa-heart")
$(document).ready(function() {
    function UpdateText(btn, NewCount, HtmlHeart) {
        btn.attr("data-likes", NewCount)
        btn.text(HtmlHeart + " " + NewCount)
    }
    $(".like-btn").click(function(e) {
        e.preventDefault()
        var this_ = $(this)
        var LikeUrl = this_.attr("data-href")
        var LikeCount = parseInt(this_.attr("data-likes")) | 0
        var AddLike = LikeCount + 1
        var RemoveLike = LikeCount - 1
        if (LikeUrl) {
            $.ajax({
                url: LikeUrl,
                method: "get",
                data: {},
                success: function(data) {
                    console.log(data)
                    if (data.liked) {
                        UpdateText(this_, RemoveLike, HtmlHeart)
                    } else {
                        UpdateText(this_, AddLike, HtmlHeart)
                    }
                },
                error: function(error) {
                    console.log(error)
                    console.log("error")
                }
            })
        }
    })
})
</script>

能否请您帮我了解如何将html作为var传递？如果需要，我将添加views.py和.html模板代码。谢谢！

Answer 1

通过jquery使用html（）方法。

尝试一下

 //var HtmlHeart = $(this).children("i").attr("class", "fas fa-heart")
 $(document).ready(function() {
  //function UpdateText(btn, NewCount, HtmlHeart) {
    //btn.attr("data-likes", NewCount);
    //btn.text(HtmlHeart + " " + NewCount);
  //}
  $(".like-btn").click(function(e) {
    e.preventDefault();
    var this_ = $(this);
    var LikeUrl = this_.attr("data-href");
    var LikeCount = parseInt(this_.attr("data-likes")) || 0;
    var AddLike = LikeCount + 1;
    var RemoveLike = LikeCount - 1;
    if (LikeUrl) {
      $.ajax({
        url: LikeUrl,
        method: "get",
        data: {},
        success: function(data) {
          console.log(data);
          if (data.liked) {
            //UpdateText(this_, RemoveLike, HtmlHeart);
            $(this_).html(`<i class="fa fa-heart"><i> ${RemoveLike}`)
          } else {
            //UpdateText(this_, AddLike, HtmlHeart);
            $(this_).html(`<i class="fa fa-heart"><i> ${AddLike}`)
          }
        },
        error: function(error) {
          console.log("error", error);
        }
      });
    }
  });
});

将FontAwesome（html）作为JQuery变量/动词传递

1 个答案: