Изменить цвет на основе значения класса

Question

У меня очень простой скрипт, который я хочу изменить цвет текста на основе того, что он говорит.

Программно имеет смысл, чего я пытаюсь достичь, но он не работает. Я чувствую, что он работает с несколькими классами на странице, а 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>

Update (По 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> 
       } 

Как только я проверил текст, я просто добавил элемент класса «Не в запасе» к элементу.