动态更改CSS类

我在页面上有一个指示符，它可以是红色或绿色的圆圈。动态更改CSS类

<div class="publicBm changeState" currentstate="1" statusid="56" title="This is Public"></div> <!-- green --> 
<div class="privateBm changeState" currentstate="1" statusid="57" title="This is Private"></div> <!-- red -->

当用户点击该圆（其与类改变状态一个div如上所示）的AJAX调用，以更新数据库，以什么样的产品目前是，公共或私人相反。然后它返回相反的类。

所有的作品都很完美，但我想更改单击的圆圈上的类以反映更新已成功。

这就是我正在尝试的 - 正如我所说的，在php文件中的实际数据库调用是完美的，这只是该div没有改变类。

注 - 可以有每个页面多条线路上，所以我不能简单地给DIV一个ID

$('.changeState').click(function() { 
    var bm_id = $(this).attr('statusID'); 
    var current = $(this).attr('currentState'); 
    $.ajax({ 
     type: "POST", 
     url:  '/ajax/actions/editStateBm.php?bm_id='+bm_id+'&current='+current, 
     success: 
      function(data) { 
       $(this).removeAttr('class').attr('class', data + ' changeState'); 

      } 
    }); 

});

来源

2013-10-24 Darren Sweeney

您的问题是this。 this不是ajax成功回调中的DOM元素。相反，将上下文设置为元素的上下文，以便回调内的this现在引用元素而不是jqXhr对象。

$.ajax({ 
    type: "POST", 
    url:  '/ajax/actions/editStateBm.php?bm_id='+bm_id+'&current='+current, 
    context: this, //<-- Here 
    success: 
     function(data) { 
      this.className = data + ' changeState'; 

     } 
});

或使用缓存的上下文。

... 
    var self = this; 
    $.ajax({ 
     type: "POST", 
     url:  '/ajax/actions/editStateBm.php?bm_id='+bm_id+'&current='+current, 
     success: 
      function(data) { 
       self.className = data + ' changeState'; 

      } 
    }); 
    ...

顺便说一句你在上传什么？你需要使用GET？

$.ajax({ 
    type: "GET", 
....

来源

2013-10-24 15:48:53 PSL

哈，有多奇怪 - 我使用的是GET，它只是很好，虽然说类型：POST –

@DarrenSweeney做到了。 – PSL

真棒谢谢，现在也允许我用同样的理论做更多的改变，所以非常感谢那个队友！也欣赏迷你教程。 –

使用.addClass()

success: function (data) { 
    $(this).removeAttr('class').addClass(data + ' changeState'); 
}

和removeProp

success: function (data) { 
    $(this).removeProp('class').addClass(data + ' changeState'); 
}

来源

2013-10-24 15:42:23

没有做任何事情恐怕 –

@DarrenSweeney两件事情，应该说是POST或GET和'this'不代表回调中的DOM元素。看到我的答案，如果没有其他问题，这可能会起作用。 – PSL

这应该是这样的：

$(this).removeClass('class').addClass(data + ' changeState');

来源

2013-10-24 15:45:13

动态更改CSS类

回答

相关问题