Class change trigger function

Question

I have the following. I am trying to call a function based on a css class change, but it does not work.

<script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#slider-banner").bind("cssClassChanged",function(){ console.log("I'm Here!"); if(jQuery("#slider-banner").hasClass('living-nutrients')) { jQuery("#home-middle-first").css("background-image","url([image path])"); } else if(jQuery("#slider-banner").hasClass('right-partner')) { jQuery("#home-middle-second").css("background-image","url([image path])"); } else if(jQuery("#slider-banner").hasClass('with-you')) { jQuery("#home-middle-third").css("background-image","url([image path])"); } }); jQuery("#slider-banner").trigger('cssClassChanged'); 

The console displays my console.log message on the page load, but not when the class changes again after the page loads. Does anyone see what I'm doing wrong?

UPDATE:

So, I found out that "cssClassChanged" is not legal ... I tried to adapt the answer that I found somewhere else ... I understand that if jQuery was a weapon, I would be dangerous! (knowing that this is half the battle, right?)

My attempt to adapt gdoron answer related below:

 <script type="text/javascript"> jQuery(document).ready(function() { function checkForChanges() { if(jQuery("#slider-banner").hasClass('living-nutrients')) { jQuery("#home-middle-first").css("background-image","url([image path])"); } else if(jQuery("#slider-banner").hasClass('right-partner')) { jQuery("#home-middle-second").css("background-image","url([image path])"); } else if(jQuery("#slider-banner").hasClass('with-you')) { jQuery("#home-middle-third").css("background-image","url([image path])"); } else setTimeout(checkForChanges, 500); } }); </script> 

I'm still missing something. It only works for the first class when loading the page.

Someone asked how I change classes. I use a slider, and on each slide there is a div with the identifier "slider banner", and the class changes depending on which of the three ID'd areas below, which I am trying to switch the background image.

Answer 1

There is no such event cssClassChanged I think everything explains ...

10 hours ago I answered how you can detect a class change, read my answer there

---

Update:

 function checkForChanges() { var sliderBanner = jQuery("#slider-banner"); if(sliderBanner.hasClass('living-nutrients')) { jQuery("#home-middle-first").css("background-image","url([image path])"); } else if(sliderBanner.hasClass('right-partner')) { jQuery("#home-middle-second").css("background-image","url([image path])"); } else if(sliderBanner.hasClass('with-you')) { jQuery("#home-middle-third").css("background-image","url([image path])"); } setTimeout(checkForChanges, 500); } jQuery(checkForChanges); 

Answer 2

There is no inline event named "cssClassChanged". You have created your own custom event and fire it manually at page load time. It does not fire automatically - you have to call trigger('cssClassChanged') every time you change the CSS class.

Answer 3

There is no cssClassChanged event that I know of, you need to manually fire it. However, you do not change the class in the code you submitted, so I'm not sure where you want to run it.

Answer 4

You can connect your own event listener for clicking on the slide show buttons (previous / next) - they will be added in addition to existing ones.

in your event listeners you can check the css class for any element you are interested in.

 $(".prev").on("click", function() { //user has explicitly clicked "prev"!! }); $(".next").on("click", function() { //user has explicitly clicked "next"!! });