Question

所以我正在学习JQuery而且我坚持这个：

我有一个显示HTML表格的页面，在该表格中我希望有一个可以通过下拉菜单更新的单元格，所以你点击编辑，当前值消失，下拉菜单出现，当值更改后，数据库将更新并显示新值。（随着菜单消失）

问题似乎是将.text和.show放在数据回调函数中 - 如果我提醒数据它从PHP文件返回正确的数据，如果我注释掉.post行并替换（数据）与（“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
    });
});

Answer 1

您无法访问$(this)功能中的$.post。

您可以在$.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
    });
});

Answer 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 });回调

{{1}}

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

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

3 个答案: