CODEWITHSUNDEEP
javascriptjquery
John Cooling
John Cooling

Reputation: 415

Change colour based on class value

I have a very simple script that I want to change the colour of text based on what it says.

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

Programmatically it makes sense what I'm trying to achieve but it does not work. I feel its to do with multiple classes on the page and jQuery not knowing what element to select.

Edit

Here is the 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>
                    }

Upvotes: 2

Views: 1210

Answers (4)

Romulo
Romulo

Reputation: 5104

Explanation

If you want to change some CSS properties of an element based on other attributes (like the text value in your example), you can use the .css(propertyName, function).

However, to simplify styling the element, i would recommend using CSS classes. In order to do change the class of an element we will use another jQuery method, the .addClass(function).

Example 1 - using .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>

Example 2 - using .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>

Upvotes: 1

Diptox
Diptox

Reputation: 1809

Change the val() to text() and it will work.

Upvotes: 0

John Cooling
John Cooling

Reputation: 415

Managed to resolve this issue using Razor

See Working code below.

 @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>
                }

Once I checked the text, I just added the Not In Stock css class to the element.

Upvotes: 0

J Santosh
J Santosh

Reputation: 3847

As other Answers mentioned you have to use .text() instead of .val() and you said you have many elements with same class name and there is possibility that the element with text Sorry Not In Stock must be anywhere.

So when you have multiple elements with same class name you must iterate over all elements like below.

Hope this helps

$('.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 (According to RAZOR)

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

And StockText is your @item.StockText

Upvotes: 0

Related Questions