Switch/Change Background Image of CSS in Jquery using if/else

Question

Been at it for hours Please help

   $("#NewsReel").click(function(){
   if( $(".block_news").css("background","url('/new_skool/images/news_1.jpg')no-repeat"))
   {
   $(".block_news").css("background","url('/new_skool/images/news(2).jpg')no-repeat");
   }
   else
   {
   if( $(".block_news").css("background","url('/new_skool/images/news(2).jpg')no-repeat"))
   {
   $(".block_news").css("background","url('/new_skool/images/news_1.jpg')no-repeat");
   }
   }
   });

Thank You

It changes the image once, but then does not fire the second if statement.

andyb · Accepted Answer · 2012-04-06 11:54:52Z

3

Getting the background value is not performed this way. You need to use:

if ($('element').css('background') == 'value') {
   ...
}

Also, there is is no guarantee that jQuery will not optimise or set the background exactly the way in which you set it. For example it might return the value as:

no-repeat url('/new_skool/images/news(2).jpg')

It's best to create two CSS classes and just use toggleClass() to change the background image for example in this demo

HTML

<ul id="NewsReel">
    <li class="block_news">news</li>
</ul>

CSS

li {
   background:url('http://lorempixel.com/25/25/abstract/1/') no-repeat;
}

li.clicked {
    background:url('http://lorempixel.com/25/25/abstract/2/') no-repeat;
}

JavaScript (jQuery)

$("#NewsReel").click(function() {
    $('.block_news').toggleClass('clicked');
    return false;
});

answered Apr 6, 2012 at 11:54

andyb

43.9k12 gold badges126 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mreq · Accepted Answer · 2012-04-06 11:50:45Z

2

Use css classes to style the backgrounds with jQuery addClass / removeClass / hasClass.

answered Apr 6, 2012 at 11:50

mreq

6,5524 gold badges39 silver badges57 bronze badges

Comments

Steve Wellens · Accepted Answer · 2012-04-06 12:00:46Z

2

This line/test:

if( $(".block_news").css("background","url('/new_skool/images/news_1.jpg')no-repeat"))

...will ALWAYS return the equivalent of true (it returns a jQuery Object).

answered Apr 6, 2012 at 12:00

Steve Wellens

20.6k2 gold badges31 silver badges70 bronze badges

Comments

trickyzter · Accepted Answer · 2012-04-06 11:48:00Z

1

In all cases your setting the background. To retrieve the value of the background lose the second parameter in the css method.

answered Apr 6, 2012 at 11:48

trickyzter

1,60113 silver badges9 bronze badges

Collectives™ on Stack Overflow

Switch/Change Background Image of CSS in Jquery using if/else

4 Answers 4

HTML

CSS

JavaScript (jQuery)

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

HTML

CSS

JavaScript (jQuery)

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related