根據類別值更改顏色

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類的元素。