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')是{{1}根据{{1}}。

有人可以帮助我吗？

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内容中的done未引用img。您需要在click事件处理程序中保存上下文：

$('.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元素的src或id，您可以直接更改属性，即this.src = 'something.jpg或{{1} }。

jQuery - 在jQuery.ajax（）中更新单击的图像。完成（）

2 个答案: