Jquery .post然后使用.show和.hide - Jquery .post then use .show and .hide

所以我正在学习JQuery，我被这个卡住了:

我有一个页面，显示一个HTML表和表内我想有一个单元格，可以通过下拉菜单更新，所以你点击编辑，当前值消失，下拉菜单出现，当值被改变数据库更新和新值显示。(菜单消失)

问题似乎是把。text和。show在数据回调函数内-如果我警告数据，它是从PHP文件返回正确的数据，如果我注释出。post行并用("test_text")替换(data)，它会替换菜单，因为我想要它。

希望我的问题写得足够好，让人理解，谢谢。

下面是代码

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

不能在$.post函数内部访问$(this)

您可以在$.post:

之前执行此操作。

var that = this;

在post中，这样做:

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

这将是你的结果代码:

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

在回调函数中，this已被更改为引用XHR对象，如果您想从回调中访问它，则需要从函数外部引用backup this

var $this = $(this);
$.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
    });

//Cache your selectors!
var catColorHide = $('.cat_color_hide_rep');
catColorHide.hide();
$('.act_status_dropD').on('click', function () { //Use the .on() method and save a function call. The .click() simply calls the .on() and passes in the callback.
    var this = $(this), //If you use a selection more than once, you should cache it.
        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();
});
catColorHide.on('change', function () {
    var this = $(this),
        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) {
        // I don't do the 'var this = $(this)' in here to fix your problem. The 'this' you see me using here refers to the element from the callback.
        this.parents('tr').find('.cat_color_show_rep').text(data);
        this.parents('tr').find('.cat_color_show_rep').show();
        console.log(data); // Use this for testing instead.
    });
});