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

【问题标题】：Jquery .post then use .show and .hideJquery .post 然后使用 .show 和 .hide
【发布时间】：2013-03-25 15:21:54
【问题描述】：

所以我正在学习 JQuery，但我一直坚持：

我有一个显示 HTML 表格的页面，在该表格内我想要一个可以通过下拉菜单更新的单元格，因此您单击编辑，当前值消失并出现下拉菜单，当值更改数据库将更新并显示新值。（菜单消失）

问题似乎在于将 .text 和 .show 放在数据回调函数中 - 如果我提醒数据它正在从 PHP 文件返回正确的数据，并且如果我注释掉 .post 行并替换 ( data) 和 ("test_text") 它替换了我想要的菜单。

希望我的问题写得足够好，能说得通，谢谢。

这是代码

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

【问题讨论】：

警报的输出是什么？顺便说一句，您可以使用 javascript 控制台 console.log('value')
警报只是来自 PHP 页面的值，以确保 .post 正常工作
所以更新后无法在列中显示任何内容.. ?

标签： php jquery

【解决方案1】：

您无法访问$.post 函数内的$(this)。

你可以在$.post之前这样做：

var that = this;

在帖子中，这样做：

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

【讨论】：

感谢工作 - 我希望我能早点问... 8 小时的黑客攻击我永远不会回来..

【解决方案2】：

在回调函数中，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
    });

【讨论】：

【解决方案3】：

//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.
    });
});

【讨论】：