Question

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

<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');

            }
    });

});

Answer 1

使用.addClass()

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

和removeProp

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

Answer 2

您的问题是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",
 ....

Answer 3

这应该是这样的：

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

动态更改CSS类

3 个答案: