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”类时，我想通过背景atrribute覆盖当前硬编码的“库存”图形和缺货。像这样：

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

简而言之，有没有办法根据另一个类的存在来覆盖CSS类。有点像“if”CurrentlySoldOut类正在显示，然后addClass到另一个div“（我将控制图形。）

Answer 1

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

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

然后你需要将outOfStock类的style / image-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秒检查一次，因为延迟是以ms为单位。

Answer 2

试试这个：

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

Answer 3

您可以添加具有新背景的类，因为类名似乎已经更新：

.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;
}

Answer 4

试试这个

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

addClass（）基于另一个类的存在？

4 个答案: