Передача FontAwesome (html) как JQuery var / verb - PullRequest
Новая
       5

Передача FontAwesome (html) как JQuery var / verb

0 голосов
/ 03 января 2019

Я изучаю Django и создаю функциональную кнопку Like без необходимости перезагрузки страницы с использованием Ajax.Это мой первый контакт с JS.Это работает, но я хочу передать html (FontAwesome) в этом скрипте, чтобы показать значок вместе с номером Likes.

Я попытался передать его, используя аргумент "глагол" в функции, но он просто показывает простой текст).Я также попытался получить HTML-код как var (из похожих вопросов о StackOverflow), но он не работает для меня (он отображает [объект объекта]).Я думаю, что я делаю что-то не так.Код ниже: 

<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 код шаблона.Спасибо!

1 Ответ

0 голосов
/ 03 января 2019

Используйте метод html () от jquery.

попробуйте это, 

 //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);
        }
      });
    }
  });
});
...