单击元素时将jQuery选择器应用于表格答案

【问题标题】：Applying jQuery selector to table when element is clicked单击元素时将jQuery选择器应用于表格
【发布时间】：2012-07-04 01:13:20
【问题描述】：

当需要基于 Ajax 返回对元素进行简单的 css 更改时，我认为“this”的范围存在问题。

$('.time_slot_holder').click(function(){
    var data_day=$(this).data('agent_day');
    var data_time=$(this).data('agent_time');
    var data="agent_id="+agent_id+"&day="+data_day+"&time="+data_time
    $.ajax({
        type:"POST",
        url:"admin_includes/book_time.php",
        data:data,
        success:function(html){
            var split_html=html.split("|")
            if(split_html[0]=="B"){
                //booking exists
                alert("Bookings for this time slot exist. Contact Agent to arrange a re-assignment of this appointmnet.");
            }
            if(split_html[0]=="C"){
                //added to db
                $(this, '.time_slot_holder').css('background-color', 'red');
            }
            if(split_html[0]=="D"){

            }
        }
    });//end ajax
});

我要做的就是用元素 .time_slot_holder 改变网格上的颜色

忽略来自 ajax 请求的笨拙的拆分回调，这只是试图通过数据属性识别元素。基本上我需要通过ajax的回调来获取点击元素的引用。

【问题讨论】：

Jquery AJAX call: $(this) does not work after success的可能重复

标签： jquery ajax function scope this

【解决方案1】：

使用 jQuery 元素作为上下文

$('.time_slot_holder').click(function(){
    var data_day=$(this).data('agent_day');
    var data_time=$(this).data('agent_time');
    var data="agent_id="+agent_id+"&day="+data_day+"&time="+data_time

    $.ajax({
        type:"POST",
        url:"admin_includes/book_time.php",
        data:data,
        context : $(this),
        success:function(html){
            var split_html=html.split("|")
            if(split_html[0]=="B"){
                //booking exists
                alert("Bookings for this time slot exist. Contact Agent to arrange a re-assignment of this appointmnet.");

            }
            if(split_html[0]=="C"){
                //added to db
                $(this).css('background-color', 'red');
            }
            if(split_html[0]=="D"){

            }


        }
    });//end ajax

});

【讨论】：

【解决方案2】：

您应该将AJAX请求中的context选项设置为this；

$.ajax({
    type:"POST",
    url:"admin_includes/book_time.php",
    context: this,
    //..
});

否则，this 最终会成为 jqXHR 对象。

另一种（更常见的）方法是将this 的值存储在另一个变量中；

var that = this;

$.ajax({
    type:"POST",
    url:"admin_includes/book_time.php",
    data:data,
    success:function(html){
        // Use `that` instead of `this` in here.
    }
});//end ajax

另外，我不确定$(this, '.time_slot_holder') 应该选择什么，但我不确定它会起作用（需要查看您的 HTML 标记）。

如果this 是'.time_slot_holder' 的后代，那么它可以正常工作。

【讨论】：