jQuery - Updating clicked image in jQuery.ajax().done()
<p>I have a few images, like</p>

<pre><code>&lt;img src="unstarred.png" class="unstarred-button" id="unstarred-1" /&gt;
&lt;img src="unstarred.png" class="unstarred-button" id="unstarred-2" /&gt;
&lt;img src="unstarred.png" class="unstarred-button" id="unstarred-3" /&gt;
&lt;img src="unstarred.png" class="unstarred-button" id="unstarred-4" /&gt;
</code></pre>

<p>Then I bind this function:</p>

<pre><code>$('.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?
    });
});
</code></pre>

<p>Now I don't know how to go forward. I want to change the <code>src</code> attribute of the clicked image in the <code>done()</code> call, but $(this) doesn't return the image clicked for sure, as <code>$(this).attr('id')</code> is <code>undefined</code> according to <code>alert()</code>.</p>

<p>Could someone help me out?</p>
