javascript - 使用 javascript 输出样式通知

Question

我有 javascript 片段：

<div id="store_stock_display"><p>Stock: <span class="store_product_stock"></span></p></div>
<script type="text/javascript">
    $(function() {
        $('.store_product_stock').change(function() {
            if ($(this).text() == '0') {
                $('#store_stock_display').show();
                $(this).text('OUT OF STOCK');
            } else if ($(this).text() == '') {$('#store_stock_display').hide();} else {$('#store_stock_display').show();}
        });
    });
</script>

如果我的产品缺货，它会显示库存水平（例如：10、100...），如果我的产品目前缺货，它会显示缺货。

我想通知将样式设置为：

<font style="color:red; font-weight:bold;">OUT OF STOCK</font>
or
<div class="abc">OUT OF STOCK</div>

请帮帮我，非常感谢！

Answer 1

你可以使用addClass()：

.abc {
    color:red; 
    font-weight:bold
}

 if ($(this).text() == '0') {
      $('#store_stock_display').show();
      $(this).addClass('abc').text('OUT OF STOCK')
 }

W3C：HTML 与 CSS 的分离使得维护站点、跨页面共享样式表以及针对不同环境定制页面变得更加容易。这被称为结构（或：内容）与表示的分离。

Answer 2

如果您的逻辑完美，您可以使用：

$(this).css({'color': 'red', 'font-weight' : 'bold'});

在添加文本后添加此行。