Динамический динамический класс 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 --> 

Когда пользователь щелкает круг (который является DIV с классом changeState, как показано выше) вызов AJAX производится для обновления базы данных в противоположность того, что в данный момент элемент, публичным или частным порядком. Затем он возвращает противоположный класс.

Все работает отлично, но я хочу изменить класс на круг, нажав, чтобы отразить, что обновление прошло успешно.

Вот что я пытаюсь - как я уже сказал, фактический вызов базы данных в файле php идеален, это просто, что у div нет его класса.

Примечание - может быть несколько строк на каждой странице, так что я не могу просто дать Див идентификатор

$('.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. this не является элементом DOM внутри обратного вызова успеха ajax. Вместо этого установите контекст как элемент элемента, так что 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'; 

      } 
    }); 
    ... 

BTW, что вы публикуете? вам нужно использовать GET?

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

Answer 2

Использование .addClass()

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

и removeProp

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

Answer 3

Это должно быть примерно так:

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