jquery if else condition for css api

Question

I have the below jquery statement

$(this).('span.section1').css('background','url("images/accordion_closed_left.png") no-repeat scroll 0 0 transparent');

How do I write a if else statement for the css condition. What I mean is if the background image is accordion_closed_left.png then <do this> or else <do this>.

just to be precise <do this> are blocks of statement.

Thanks for your time.

This is going to be slow and horrendous to maintian. Use classes instead. — jwueller
– jwueller, Commented May 23, 2011 at 23:24

jAndy · Accepted Answer · 2011-05-23 23:29:22Z

8

I'd recommend to use a css class instead and then call jQuery's .hasClass() method on it:

css:

.closed {
    background: url("images/accordion_closed_left.png") no-repeat scroll 0 0 transparent;
}

js:

var $target = $(this).find('span.section1');

if( $target.hasClass( 'closed' ) ) {
    $target.removeClass( 'closed' );
} 
else {
    $target.addClass( 'closed' );
}

edited May 23, 2011 at 23:29

answered May 23, 2011 at 23:22

jAndy

237k57 gold badges313 silver badges363 bronze badges

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

4 Comments

jwueller Over a year ago

+1! This is by far the most elegant solution. Classes combine styling and state.

roberkules Over a year ago

a bit more elegant: $(this).find("span.section1").toggleClass("closed");

jAndy Over a year ago

@roberkules: pretty much depends on the usecase. By just toggling classes you have no chance to do other stuff, which is probably what you want when using it as state.

roberkules Over a year ago

right. toggleClass would only be used if no extra logic is needed.

lcoq · Accepted Answer · 2012-04-20 08:36:25Z

0

How to write this in jQuery with 'guides' as a class name....

<script type="text/javascript" >
function guideMenu()
{
    if (document.getElementById('guides').style.display == "none") {
        document.getElementById('guides').style.display = "block";
    }
    else {
        document.getElementById('guides').style.display = "none";
    }
}
</script>

edited Apr 20, 2012 at 8:36

lcoq

10.7k3 gold badges35 silver badges52 bronze badges

answered Apr 20, 2012 at 5:51

swapna

1

Comments

BenMorel · Accepted Answer · 2011-05-24 00:04:13Z

-1

To naively answer your question:

if ($(this).('span.section1').css('background').match('|/accordion_closed_left\.png"|')) {

}
else {

}

However I support jAndy's answer, .hasClass() is the way to go!

answered May 24, 2011 at 0:04

BenMorel

37k52 gold badges208 silver badges339 bronze badges

Collectives™ on Stack Overflow

jquery if else condition for css api

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related