我在页面上有一个指示符,它是红色或绿色圆圈。
<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 -->
当用户单击圆圈(如上所示,它是具有类changeState的div)时,将进行AJAX调用以将数据库更新为与当前项目相反的项目(公共(public)或私有(private))。然后它返回相反的类。
一切正常,但我想更改单击的圆圈上的类以反射(reflect)更新已成功。
这就是我正在尝试的 - 正如我所说,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+'¤t='+current,
success:
function(data) {
$(this).removeAttr('class').attr('class', data + ' changeState');
}
});
});
最佳答案
您的问题是这个
。 this
不是 ajax 成功回调中的 DOM 元素。相反,将上下文设置为元素的上下文,以便回调中的 this
现在引用该元素而不是 jqXhr 对象。
$.ajax({
type: "POST",
url: '/ajax/actions/editStateBm.php?bm_id='+bm_id+'¤t='+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+'¤t='+current,
success:
function(data) {
self.className = data + ' changeState';
}
});
...
顺便说一句,你发布了什么?您需要使用GET
吗?
$.ajax({
type: "GET",
....
关于javascript - 动态改变 CSS 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19570445/