Databases
StackOverflow2013
Postsdbo
POIf ID has class, set attribute of another element
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIf ID has class, set attribute of another element
    text
    copied!<p>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.</p> <pre><code>if(jQuery("#slider-banner").hasClass('living-nutrients')) { jQuery("#home-middle-first").css("background-image","[path to new background image]"); } </code></pre> <p>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!</p> <p><strong>EDIT:</strong> 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?</p> <p><strong>Example HTML where class changes:</strong></p> <pre><code>&lt;img id="slider-banner" class="living-nutrients" src="[image path]"&gt; </code></pre> <p><strong>Example HTML where I want to change background image:</strong></p> <pre><code>&lt;div class="home-middle-one-third" id="home-middle-first"&gt; &lt;a href="#"&gt;&lt;/a&gt; &lt;/div&gt; </code></pre> <p><strong>UPDATE:</strong></p> <p>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!</p> <p>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. </p> <p>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.</p> <p>Any ideas? Thank you all!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload