0

所以我正在学习 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
    });
});
4

3 回答 3

3

你不能访问$(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
    });
});
于 2013-03-25T15:26:24.083 回答
2

在回调函数中，this已改为引用XHR Object，如果要从回调中访问，则需要从函数外部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
    });
于 2013-03-25T15:27:59.963 回答
0 
//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.
    });
});
于 2013-03-25T15:32:23.027 回答