css - jQuery - 无法在 ajax 回调函数中设置 css 属性

Question

我正在尝试获取一个 jquery ajax 回调函数来更新表格单元格的背景颜色，但我无法让它工作。

我有以下代码(在 Firebug 中不会产生错误):

$(".tariffdate").click(function () {
   var property_id = $('#property_id').attr("value");
   var tariff_id = $('#tariff_id').attr("value");
   var tariff_date = $(this).attr("id");
   $.post("/admin/properties/my_properties/booking/edit/*", { property_id: property_id, tariff_id: tariff_id, tariff_date:  tariff_date },
function(data){
   var bgcol = '#' + data;
   $(this).css('background-color',bgcol);
   alert("Color Me: " + bgcol);
});

我添加警报只是为了确认我得到了预期的数据(一个 6 位十六进制代码)，我是 - 但我的表格单元格的背景顽固地拒绝改变。

所有表格单元格都有 .tariffdate 类，但也有单独的 ID。

作为测试，我尝试为该类创建一个悬停函数:

$(".tariffdate").hover(function () {
   $(this).css('background-color','#ff0000');
});

以上工作正常 - 所以我真的很困惑为什么我的回调函数不起作用。有什么想法吗？

Answer 1

在 AJAX 完成的处理程序中，this 的实例被更改为 ajax 对象。您需要将 this 的实例保存到一个对象中并使用该对象。例如:

$(".tariffdate").click(function () {
   var property_id = $('#property_id').attr("value");
   var tariff_id = $('#tariff_id').attr("value");
   var tariff_date = $(this).attr("id");
   var tariff = $(this);
   $.post("/admin/properties/my_properties/booking/edit/*", 
      { property_id: property_id, tariff_id: tariff_id, tariff_date:  tariff_date },
      function(data) {
         var bgcol = '#' + data;
         tariff.css('background-color',bgcol);
         alert("Color Me: " + bgcol);
      }
   );
});