JQuery Detect class changes

Question

I am using a plugin that added a class open to .slide-out-div when opened.

So I am trying to change some css if the open is detected.

What I need to do is

IF  $('.slide-out-div **open**') IS Detected then  $('.otherDiv').css('top','0px'); 

Not sure how to put this together...

Answer 1

There is no event of class-added, you will need to track it yourself...

It can be done with an infinite loop with setTimeout to check if the class has changed.

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

You can call the function when you want, or onDOM ready:

$(checkForChanges); 

Answer 2

The question's a bit old, but since I came across while looking for a similar problem, thought I'd share the solution I went with here - Mutation Observers

In your case, I'd create a mutation observer

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

The function in mutation observer is called any time an attribute of .slide-out-div is changed, so need to verify the actual change before acting.

More details here on Mozilla's documentation page