Событие изменения имени класса в jQuery
Существует ли способ инициировать событие в jQuery, когда классы элементов изменяются?
Примеры:
<img class="selected" />
в
<img class="selected newclass" />
инициировал событие
И
<img class="selected" />
в
<img class="" />
инициируйте событие
2 ответа
Возможно, вам удастся обойти эту проблему небольшим хитрым способом. Hook .addClass () & .removeClass () вот так:
var _addClass = $.fn.addClass,
_removeClass = $.fn.removeClass;
$.fn.addClass = function(){
// do whatever here
return _addClass.apply(this, arguments);
}
$.fn.removeClass = function(){
// do whatever here
return _removeClass.apply(this, arguments);
}
Таким образом, предполагая, что вы просто заинтересованы в наблюдении за изменениями классов элементов с помощью jQuery , вы можете запустить любой код при добавлении или удалении классов. Опять же, если в этом примере вы используете jQuery.
Конечно, вы можете перехватить и таким образом перезаписать любую функцию javascript.
Как Ник Крейвер упомянул в комментарии, существует несколько других методов jQuery, которые могут добавить или удалить класс элементов. Вам придется перехватить все из них, а именно:
.addClass()
.removeClass()
.toggleClass()
.removeAttr('class')
.attr('class', 'changed')
, если вы точно не знаете, какие методы вызываются для управления классом, вам придется позаботиться обо всех этих методах.
Не думаю, что это возможно.
События основаны на действиях пользователя, поэтому щелчок, двойной щелчок, наведение курсора и т. Д. - все действия пользователя.
Вы можете разработать какой-то блок данных для каждого элемента, а затем построить небольшую систему, которая интегрируется в методы jQuery .class () и .attr () , чтобы когда ваш код обновляет класс, он будет добавлять данные к этому элементу, содержащему предыдущий класс,
тогда, если предыдущий класс отличается от устанавливаемого класса, запускайте ваши события.
Под интегрированием я подразумеваю
var old_ClassFunc = $.fn.class; //Save it
var $.fn.class = function()
{
if($(this).data('old-class'))
{
if($(this).data('class_callback'))#
{
$(this).data('class_callback')(this);
}
}
$(this).data('old-class',$(this).attr('class')); //Update Data
return old_class.apply(this,arguments);
}
, тогда вы можете сделать что-то вроде
$('element').data('class_callback',function(context){
alert('Element class has changed');
})
Надеюсь, это вам поможет