根据类别值更改颜色

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

更改val()到text()，它会工作。

Answer 2

至于其他的答案中提到，你必须使用.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 3

说明

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

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

实施例1 - 使用的CSS（propertyName的，功能）

$(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 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> 
       } 

一旦我检查了文本，我刚刚添加了无库存css类的元素。