根据类值更改颜色

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不知道要选择哪个元素。

修改

这是剃刀

@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（函数）

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>

Answer 2

将val()更改为text()，它会有效。

Answer 3

正如其他答案提到的那样，您必须使用.text()而不是.val()，并且您说您有许多具有相同类名的元素，并且文本Sorry Not In Stock的元素可能必须是任何地方。

因此，如果您有多个具有相同类名的元素，则必须迭代所有元素，如下所示。

希望这有帮助

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="js-stock-level">Sorry Not In Stock</p>
<p class="js-stock-level">12 in Stock</p>

更新（根据RAZOR）

@{
    var NoStockText = "Sorry Not In Stock";
    var StockText = "Sorry Not In Stock";
  }
<p @if(StockText==NoStockText){<text>style='color:red;'</text>}>@StockText</p>

而StockText是@item.StockText

Answer 4

使用Razor

管理解决此问题

请参阅下面的工作代码。

 @if (item.StockText == "Sorry Not In Stock")
                {
                    <p class="js-stock-level not-in-stock">
                        @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>
                }

检查完文本后，我刚刚将Not In Stock css类添加到元素中。