javascript - jQuery - 在 jQuery.ajax().done() 中更新点击的图像

Question

我有几张图片，比如

<img src="unstarred.png" class="unstarred-button" id="unstarred-1" />
<img src="unstarred.png" class="unstarred-button" id="unstarred-2" />
<img src="unstarred.png" class="unstarred-button" id="unstarred-3" />
<img src="unstarred.png" class="unstarred-button" id="unstarred-4" />

然后我绑定这个函数：

$('.unstarred-button').click(function() {
    id = $(this).attr('id').replace(/^unstarred-/, '');
    url = '/star.php?id=' + id;

    $.ajax({
        type: 'GET',
        url:  url
    }).done(function() {
        // What should be put here?
    });
});

现在我不知道如何前进。我想src在调用中更改单击图像的属性done()，但 $(this) 不会返回确定单击的图像$(this).attr('id')，undefined根据alert().

有人可以帮我吗？

Answer 1

$('.unstarred-button').click(function() {
    var that = this;
    var id = this.id.replace(/^unstarred-/, '');
    var url = '/star.php?id=' + id;

    $.ajax({
        type: 'GET',
        url:  url
    }).done(function() {
        that.src = 'some/new/src.jpg';
    });
});

Answer 2

那是因为在不指代this的上下文中。您需要将上下文保存在事件处理程序中：doneimgclick

$('.unstarred-button').click(function() {
    var self = $(this);
    id = self.attr('id').replace(/^unstarred-/, '');
    url = '/star.php?id=' + id;

    $.ajax({
        type: 'GET',
        url:  url
    }).done(function() {
        self.attr('src', 'something.jpg');
    });
});

另外，你不需要 jQuery 来改变 DOM 元素的srcor id，你可以直接改变属性，即this.src = 'something.jpgor this.id = 'new_id'。