javascript - 动态改变 CSS 类

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调用以将数据库更新为与当前项目相反的项目(公共(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+'&current='+current,
        success:  
            function(data) {
                $(this).removeAttr('class').attr('class', data + ' changeState');

            }
    });

});

Answer 1

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