Question

I’m trying to detect if a class is present and, if so, set the background attribute of another element. This is what I have but it’s not working.

if(jQuery("#slider-banner").hasClass('living-nutrients'))
    {
        jQuery("#home-middle-first").css("background-image","[path to new background image]");
    }

BTW – My next step is for this to detect it whenever the ID “slider-banner” changes, but so far I can’t even get it to work once on page load. Any help would be greatly appreciated… Thanks!

EDIT: I changed from .attr to .css as instructed. Makes sense… but still not working. I’ve tried adding console.log message within the IF statement and got nothing also. Does that give anyone any more ideas?

Example HTML where class changes:

<img id="slider-banner" class="living-nutrients" src="[image path]">

Example HTML where I want to change background image:

<div class="home-middle-one-third" id="home-middle-first">
        <a href="#"></a>
    </div>

UPDATE:

For everyone who said it “should work”… you are right! Turns out that, as written, it doesn’t like being in the footer of the page, but when I moved it to the head, presto!

The final piece of this puzzle is to have it detect and evaluate based on the #slider-banner changing, (or more accurately, which class is present for the ID’d area), not just the page loading, as is currently.

The ID is for one element of a slide within a slider. There are three possible classes I could assign to the ID depending on which slide is visible. So I need the script to evaluate every time a slide changes.

Any ideas? Thank you all!

Answer 1

background-image is a element’s style property, not its own one.

So .css("background-image","[path to new background image]");