javascript - addClass() 基于另一个类的存在？

Question

我正在处理电子商务商店的产品页面，需要显示“有货”图形和“缺货”图形。该平台有一些限制，但有一个设置可以显示缺货图片而不是有货图片。

我想做的是默认将库存图片硬编码到页面中。像这样:

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

下面的 CSS:

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

当商品缺货时，平台后台会自动在页面中添加一个如下所示的div:

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

当出现从平台自动生成的类“CurrentlySoldOut”时，我想通过背景属性用缺货覆盖当前硬编码的“有货”图形。像这样:

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

简而言之，有没有一种方法可以根据另一个类的存在来覆盖 CSS 类。有点像“如果显示“CurrentlySoldOut 类，则将类添加到另一个 div”(我将在其中控制图形。)

Answer 1

如果您只需要在页面最初加载时发生这种情况，那么只要有任何具有匹配选择器 .CurrentlySoldOut 的元素像这样存在，您就可以更改类:

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

当然，您需要将 outOfStock 类的样式/图像 url 添加到您的 css。

如果您的页面正在更新，而用户已经在查看它，那么它会稍微复杂一些。您可以监听 DOM 的更改，然后调用上面的代码。像这样的东西在 Chrome 和 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();
});  

尽管您可能希望支持 IE ;) 您可以将 setInterval 与上述函数一起使用以定期检查状态是否已更改:

window.setInterval(updateInStockStatus, 5000);

这将每 5 秒检查一次，因为延迟以毫秒为单位。