CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Eric Saldivar
Eric Saldivar

Reputation: 33

Jquery to change CSS background: Checking to see if div contains text, then action

I am trying to get my CSS background based on weatherType.

if($('#weatherType:contains("cloudy")')) {
    $('body').css('background-image', 'url(https://hd.unsplash.com/photo-1430263326118-b75aa0da770b)');
} else if($('#weatherType:contains("clear sky")')) {
    $('body').css('background-image', 'url(https://media.giphy.com/media/3o7rc6sa2RvKo8K5EI/giphy.gif)')
};

HTML

<body>
<div class="text-center">
<h1> Show the Local Weather</h1>
<h3>Front End Developer Project</h3>
<ul class="list-unstyled">
  <i class="fa fa-home" aria-hidden="true"></i>
  <li class="btn btn-default" id="city"></li>

  <i class="wi wi-day-cloudy"></i>
  <li class="btn btn-default" id="weatherType"></li>
</br>
  <i class="wi wi-thermometer"></i>
  <li class="btn btn-default" id="fTemp"></li>

  <i class="wi wi-strong-wind"></i>
  <li class="btn btn-default" id="windSpeed"></li>
</ul>

Upvotes: 3

Views: 278

Answers (2)

freewheeler
freewheeler

Reputation: 1356

:contains is a selector. To define IF it's found in the document, you have to go with .length which returns the number of elements (this case: 1).

Then:

if ($('#weatherType:contains("cloudy")').length >0) {
    $('body').css(  );
} else if ($('#weatherType:contains("sunny")').length >0) {
    $('body').css(  );
}

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115242

In your code the first if condition would be always true since $(...) returns a jQuery object and which is a truthy value so always the first if block gets executed. Use length property instead.

if($('#weatherType:contains("cloudy")').length) {
//--------------------------------------^^^^^^-------
    $('body').css('background-image', 'url(https://hd.unsplash.com/photo-1430263326118-b75aa0da770b)');
} else if($('#weatherType:contains("clear sky")').length) {
//------------------------------------------------^^^^^^-------
    $('body').css('background-image', 'url(https://media.giphy.com/media/3o7rc6sa2RvKo8K5EI/giphy.gif)')

Or you can use jQuery is() method which returns a Boolean value.

if($('#weatherType').is(':contains("cloudy")')) {
//------------------^^^^-------
    $('body').css('background-image', 'url(https://hd.unsplash.com/photo-1430263326118-b75aa0da770b)');
} else if($('#weatherType').is(':contains("clear sky")')) {
//-------------------------^^^^-------
    $('body').css('background-image', 'url(https://media.giphy.com/media/3o7rc6sa2RvKo8K5EI/giphy.gif)')

Upvotes: 4

Related Questions