javascript - 根据类值更改颜色

Question

我有一个非常简单的脚本，我想根据它所说的改变文本的颜色。

  $(document).ready(function () {

    if ($('.js-stock-level').val() == 'Sorry Not In Stock') {
        $('.js-stock-level').css({ 'color': 'red', 'font-weight' : 'bold' });
    }
    else {
        $('.js-stock-level').css({ 'color': 'green', 'font-weight' : 'bold' });
    }
});

<p class="js-stock-level">Sorry Not In Stock</p>
<p class="js-stock-level">12 in Stock</p>

以编程方式，我试图实现的目标是有意义的，但它不起作用。我觉得这与页面上的多个类有关，而 jQuery 不知道要选择什么元素。

编辑

这是 Razor

@if (item.StockLevel == 0)
                    {
                        <p class="js-stock-level">
                            @item.StockText
                        </p>
                    }
                    else
                    {
                        <p class="js-stock-level">
                            @item.StockText
                        </p>
                        <p>£@item.Price inc VAT</p>

                        <span>Quantity: </span><input type="number" style="width:35px" value="1" min="1" /><br /><br />
                        <button class="btn btn-primary">Add to basket</button>
                    }

Answer 1

说明

如果您想根据其他属性更改元素的某些 CSS 属性(例如示例中的文本值)，您可以使用 .css(propertyName, function) .

但是，为了简化元素的样式，我建议使用 CSS 类。为了更改元素的类，我们将使用另一个 jQuery 方法，.addClass(function) .

示例 1 - 使用 .css(propertyName, function)

$(document).ready(function() {

  $('.js-stock-level').css('color', function(elm) {
    var text = $(this).text();
    return (text == 'Sorry Not In Stock' ? 'red' : 'green');
  });

});

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<p class="js-stock-level">Sorry Not In Stock</p>

<p class="js-stock-level">12 in Stock</p>

示例 2 - 使用 .addClass(function)

var NOT_IN_STOCK_TEXT = 'Sorry Not In Stock',
  NOT_IN_STOCK_CLASS = 'not-in-stock';

$(document).ready(function() {

  $('.js-stock-level').addClass(function() {
    return $(this).text() === NOT_IN_STOCK_TEXT ? NOT_IN_STOCK_CLASS : '';
  });

});

.js-stock-level {
  color: green;
}
.js-stock-level.not-in-stock {
  color: red;
  font-weight: bold;
}

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<p class="js-stock-level">Sorry Not In Stock</p>

<p class="js-stock-level">12 in Stock</p>