Jquery .post然后使用.show和.hide

Question

So I'm learning JQuery and I'm stuck on this:

I have a page that displays a HTML table and inside that table I want to have a cell that can be updated via a dropdown menu, so you click on edit, the current value disappears and dropdown menu appears, and when the value is changed the database is updated and the new value is displayed. (with the menu disappearing)

The problem seem to be putting the .text and .show inside the data callback function - if I alert the data it is returning the correct data from the PHP file, and if I comment out the .post line and replace the (data) with ("test_text") it replaces the menu as I want it to.

Hopefully my question is well enough written to make sense, thanks.

Here's the code

$('.cat_color_hide_rep').hide();
$('.act_status_dropD').click(function () {
    var record_id = $(this).parents('tr').find('.record_id').text()
    $(this).parents('tr').find('.cat_color_hide_rep').show();
    $(this).parents('tr').find('.cat_color_show_rep').hide();
});
$('.cat_color_hide_rep').change(function () {
    var record_id = $(this).parents('tr').find('.record_id').text()
    $(this).parents('tr').find('.cat_color_hide_rep').hide();
    $.post('TEST_ajax_rep_list_status.php', {
        ID: record_id
    }, function (data) {
        $(this).parents('tr').find('.cat_color_show_rep').text(data);
        $(this).parents('tr').find('.cat_color_show_rep').show();
        alert(data); // for testing
    });
});

Answer 1

You can not access the $(this) inside the $.post function.

You can do this before the $.post:

var that = this;

And inside the post, do this:

$(that).parents('tr').find('.cat_color_show_rep').text(data);
$(that).parents('tr').find('.cat_color_show_rep').show();

This would be your resulting code:

$('.cat_color_hide_rep').hide();
$('.act_status_dropD').click(function () {
    var record_id = $(this).parents('tr').find('.record_id').text()
    $(this).parents('tr').find('.cat_color_hide_rep').show();
    $(this).parents('tr').find('.cat_color_show_rep').hide();
});
$('.cat_color_hide_rep').change(function () {
    var record_id = $(this).parents('tr').find('.record_id').text()
    $(this).parents('tr').find('.cat_color_hide_rep').hide();

    /** ADDED LINE **/
    var that = this;

    $.post('TEST_ajax_rep_list_status.php', {
        ID: record_id
    }, function (data) {

        /** CHANGED LINES **/
        $(that).parents('tr').find('.cat_color_show_rep').text(data);
        $(that).parents('tr').find('.cat_color_show_rep').show();

        alert(data); // for testing
    });
});