CODEWITHSUNDEEP
javascriptjqueryhtmlcss
aaronegan
aaronegan

Reputation: 64

addClass() based on the presence of another class?

I'm working on an ecommerce store product page and need to show an "in-stock" graphic and an "out-of-stock" graphic. The platform has some limitations but there's a setting to show an out of stock graphic but not an in stock one.

What I'd like to do is have the in stock graphic hardcoded into the page by default. Like this:

<div class="inStock"></div>

CSS below:

.inStock {
    width: 143px;
    height: 40px;
    background: url('../product_images/uploaded_images/in-stock.jpg');
    margin-left: 60%;
    margin-top: 5%;
    position: absolute;
}

When a product goes out of stock, the platform backend automatically adds a div that looks like this into the page: 

<div class="CurrentlySoldOut">
    <p>
        <span lang="en">Sorry but this item is currently unavailable.</span>
    </p>
</div>​

When the class "CurrentlySoldOut" appears, which is generated from the platform automatically, I'd like to override the current hardcoded "in stock" graphic with the out of stock via the background atrribute. Something like this:

background: url('../product_images/uploaded_images/out-of-stock.jpg');.

In short, is there a way to override a CSS class based on the presence of another class. Sort of like "if "CurrentlySoldOut class is showing, then addClass to another div" (where I will control the graphic.)

Upvotes: 1

Views: 1537

Answers (4)

jshanley
jshanley

Reputation: 9138

If you only need this to happen when the page initially loads, you can just change the class if any element with matching selector .CurrentlySoldOut exists like this:

if ($('.CurrentlySoldOut').length > 0) {
  $('.inStock').removeClass('inStock').addClass('outOfStock');
}

Then of course you need to add the style/image-url for the outOfStock class to your css.

If your page is being updated while the user is already viewing it, then it would be slightly more involved. You could listen for changes to the DOM, and then call the code above. Something like this works in Chrome and Firefox:

function updateInStockStatus() {
  // same code as above
  if ($('.CurrentlySoldOut').length > 0) {
    $('.inStock').removeClass('inStock').addClass('outOfStock');
  }
}

// listen for DOM updates, calling above function
$('body').bind('DOMSubtreeModified', function() {
  updateInStockStatus();
});

Since you probably want to support IE though ;) you could use setInterval with the function above to check periodically that the status has changed:

window.setInterval(updateInStockStatus, 5000);

That would check every 5 seconds, since the delay is in ms.

Upvotes: 1

Shijin TR
Shijin TR

Reputation: 7788

Try this

  if ($(".CurrentlySoldOut")[0])
     $('.inStock').css("background", "url(../product_images/uploaded_images/out-of-stock.jpg");

Upvotes: 0

Ibu
Ibu

Reputation: 43850

You can add a class with the new background, since the class name seems to be updated already:

.inStock {
    width: 143px;
    height: 40px;
    background: url('../product_images/uploaded_images/in-stock.jpg');
    margin-left: 60%;
    margin-top: 5%;
    position: absolute;
}

.CurrentlySoldOut{
    width: 143px;
    height: 40px;
    background: url('../product_images/uploaded_images/in-stock.jpg');
    margin-left: 60%;
    margin-top: 5%;
    position: absolute;
}

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

Try this:

if($('.CurrentlySoldOut').length)//true when CurrentlySoldOut exists
    $('.inStock').css("background", "url(../product_images/uploaded_images/out-of-stock.jpg");; //change bg image

Upvotes: 0

Related Questions