如果ID具有类，则设置另一个元素的属性

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]");

Answer 2

Almost!

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

css is the correct function to set a CSS attribute.
The attr will set an HTML attribute. <div attr='attr value'>

Edit
I'm kind of guessing about the functionality of your script here in the following example.
When you set the background-image of a HTML node, that's all it does is set the background image. You must also set the width and height accordingly, to all the node to be large enough to even see the background of the node. Background images will not automatically resize the node.

var slider = jQuery("#slider-banner"); // jQuery("#slider-banner") is slow, so we save it to a var if we use it more than once
console.log(slider); // should be this in Chrome: [<img id="slider-banner" class="living-nutrients" src="[image path]">]
if(slider.hasClass('living-nutrients'))
{
    jQuery("#home-middle-first").css({
        "background-image":"url("+slider.attr('src')+")", // url() for good meassures
        //"background-image":slider.css('background-image'), //try this if that doesn't work
        "height":slider.height(),
        "width":slider.width()
    });
}

Here is a working example.

Answer 3

尝试这个

jQuery("#home-middle-first").css("background-image","url([path])");