如何使用ajax调用更改图标

时间:2019-05-14 13:35:48

标签: jquery ajax

我正在尝试使用jquery和ajax调用更改图标。我具有此功能,可让任何登录的用户喜欢或不喜欢该图像。为此,我使用jquery的click事件获取函数的URL,然后使用ajax尝试更改图标。 这是详细的代码:

<a href="#" class="pull-right nogo" 
  data-url="{% url 'favorite' song.id %}"><i class="fa fa-heart-o"></i></a>
$('.nogo').on('click', function () {
    var url = $(this).attr('data-url');
    console.log(url);
    $.ajax({
        type: "get",
        url: url,
        success: function () {
            icon = $(this).find("i");
            icon.toggleClass("icon-circle-arrow-up icon-circle-arrow-down");
            console.log('done');
        }
    });
});

2 个答案:

答案 0 :(得分:0)

$('.nogo').on('click', function () {
    var url = $(this).attr('data-url');
    console.log(url);
    var _this = $(this);
    $.ajax({
        type: "get",
        url: url,
        success: function () {
            icon = _this.find("i");
            icon.toggleClass("fa-heart fa-heart-o");
            console.log('done');
        }
    });
});

答案 1 :(得分:0)

正如塔普拉(Taplar)所说:'this'可能存在问题

你可以试试吗?

$('.nogo').on('click', function (e) {
    var url = $(this).attr('data-url');
    // Uses the click event to get where clicked.
    // And create a jQuery object of it.
    var target = $(e.target)
    $.ajax({
        type: "get",
        url: url,
        success: function () {
            target.toggleClass("icon-circle-arrow-up icon-circle-arrow-down");
            console.log('done');
        }
    });
});