0

我在页面上有一个红色或绿色圆圈的指示器。

<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 调用以将数据库更新为与当前项目相反的状态，公共或私有。然后它返回相反的类。

一切正常，但我想更改单击圆圈上的类以反映更新已成功。

这就是我正在尝试的 - 正如我所说，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');

            }
    });

});
4

3 回答 3

1

使用.addClass() 

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

和removeProp

success: function (data) {
    $(this).removeProp('class').addClass(data + ' changeState');
}
于 2013-10-24T15:42:23.410 回答
1

你的问题是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-24T15:48:53.260 回答
0

这应该是这样的：

$(this).removeClass('class').addClass(data + ' changeState');
于 2013-10-24T15:45:13.700 回答