Изменения класса JQuery Detect

Я использую плагин, который добавляет класс open в .slide-out-div при открытии.

Поэтому я пытаюсь изменить некоторый css, если обнаружено открытие.

Что мне нужно сделать, это

IF

$('.slide-out-div **open**') IS Detected then

$('.otherDiv').css('top','0px');

Не уверен, как это сделать вместе...

Ответы

Ответ 1

Нет события class-added, вам нужно будет отследить его самостоятельно...

Это можно сделать с помощью бесконечного цикла с setTimeout, чтобы проверить, изменился ли класс.

function checkForChanges()
{
    if ($('.slide-out-div').hasClass('open'))
        $('.otherDiv').css('top','0px');
    else
        setTimeout(checkForChanges, 500);
}

Вы можете вызвать функцию, если хотите, или onDOM готов:

$(checkForChanges);

Ответ 2

Вопрос немного стар, но с тех пор, как я столкнулся с поиском аналогичной проблемы, подумал, что поделюсь решением, с которым я пошел, - Наблюдатели мутаций

В вашем случае я создаю наблюдателя мутаций

var mut = new MutationObserver(function(mutations, mut){
  // if attribute changed === 'class' && 'open' has been added, add css to 'otherDiv'
});
mut.observe(document.querySelector(".slide-out-div"),{
  'attributes': true
});

Функция в мутационном наблюдателе вызывается в любое время, когда изменяется атрибут .slide-out-div, поэтому перед действиями необходимо проверить фактическое изменение.

Подробнее здесь, на странице страницы документации Mozilla

Ответ 3

Вы можете использовать подключить плагин jQuery. Основная функция плагина - связать функцию слушателя при изменении атрибута HTML-элементов.

Пример кода:

$("#myDiv").attrchange({
    trackValues: true, // set to true so that the event object is updated with old & new values
    callback: function(evnt) {
        if(evnt.attributeName == "class") { // which attribute you want to watch for changes
            if(evnt.newValue.search(/open/i) == -1) { // "open" is the class name you search for inside "class" attribute

                // your code to execute goes here...
            }
        }
    }
});