Question

单个产品页面显示缺货/缺货；两个文本=红色。我需要更改In stock =绿色，而Out of stock仍为红色。

帮助会很棒！

Answer 1

想通了。

p.stock.out-of-stock {
    color: #ff0000 !important;
}

和

p.stock.in-stock {
    color: #ff0000 !important;
}

进入自定义CSS并相应地调整十六进制代码。

不确定如何删除我的问题，但也许会对其他人有所帮助。

Answer 2

仅使用CSS不能做到这一点，但是您可以使用JavaScript和api做到这一点。

例如，这是一个html

<div>
   <p class="stock">Stock</p>
</div>

JavaScript


var stock = document.querySelector('.stock');
    function countProducts(){
            fetch('http://127.0.0.1:8000/stock')
            .then(function(response) {
                return response.json();
            })
            .then(function(myJson) {
                if (myJson != 0) {
                    stock.style.color= 'green';
                 }else{
                    stock.style.color = 'red';
                }
            });
    }

但是，如果您想知道如何在CSS中进行操作。就是这样

HTML

   <div>
       <p class="stock">Stock</p>
       <p class="NoStock"> No Stock </p>
    </div>


    //If there is a stock
    .stock{
     color: 'green';
     display: inherit;
    }

    .noStock{
      color: 'red';
      display : 'none';
    }

    //If there is  not a stock

    .noStock{
     color: 'red';
     display: 'inherit';
    }

    .stock{
     color: green;
     display: 'none';
    }

更改缺货/库存文本颜色

2 个答案: