Question

我正在尝试使用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');
        }
    });
});

Answer 1

$('.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');
        }
    });
});

Answer 2

正如塔普拉（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');
        }
    });
});

如何使用ajax调用更改图标

2 个答案: