jquery: onclick change background color

Question

I have following UL - LI html.

<UL>
<LI><span id='select1'>Text</span></LI>
<LI><span id='select2'>Text</span></LI>
<LI><span id='select3'>Text</span></LI>
<LI><span id='select4'>Text</span></LI>
<LI><span id='select5'>Text</span></LI>
<LI><span id='select6'>Text</span></LI>
</UL>

If I click on specific <span>, its background color should be changed. i.e. if I click on span having id='select3', its background-color should be changed.

How this can be done using jQuery?

Attach a click handler to the spans in which you change the background color. What exactly do you need to know? What have you tried? — Felix Kling
– Felix Kling, Commented Feb 24, 2011 at 11:02

Prakash · Accepted Answer · 2011-02-24 11:20:07Z

8

Try this one :

$('li span[id^="select"]').click(function(){
   $(this).css('background-color',"#ccc")
})

what it does is, clicking the span inside li having id starting with 'select' changes the backgound color.

answered Feb 24, 2011 at 11:20

Prakash

6,6123 gold badges27 silver badges33 bronze badges

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

Comments

Alexey Ogarkov · Accepted Answer · 2011-02-24 11:15:58Z

1

You can use the following

jQuery("#select1").click(function(){jQuery(this).css({'background-color':'red})});

Hope it helps.

Update my answer to put handler on each select. You can add some attr to your span elements to represent color. e.g. <span rel="red">Text</span>. And then you can write handler like

jQuery("ul span[id^='select']").click(function(){jQuery(this).css({'background-color':jQuery(this).attr('rel')})});

edited Feb 24, 2011 at 11:15

answered Feb 24, 2011 at 11:03

Alexey Ogarkov

2,9161 gold badge23 silver badges29 bronze badges

2 Comments

Felix Kling Over a year ago

This will only add the click handler to the first element. Converting this to apply to multiple elements should be easy but you should mention it.

gautamlakum Over a year ago

yes, here the #no of <LI>s will be dynamic. then what should I do?

TimCodes.NET · Accepted Answer · 2011-02-24 11:11:19Z

0

Try

$("span").click(function(){
  if($(this).attr('id') == "select3") $(this).css('background-color', 'red');
});

edited Feb 24, 2011 at 11:11

answered Feb 24, 2011 at 11:05

TimCodes.NET

4,7391 gold badge27 silver badges37 bronze badges

2 Comments

TimCodes.NET Over a year ago

theres probably a way to combine the if statement into the selector, but i don't do much jQuery

Andrea Over a year ago

Not only there are no select elements, but : should , in the css method.

BoltClock · Accepted Answer · 2012-08-14 06:53:48Z

0

If you have many list elements, you may want to use event delegation and only manage a click on the ul. So you can do

$('ul').click(function(event) {
    switch($(event.target).attr('id')) {
        case select1:
            $(event.target).css('background-color', 'red');
            break;
        //More case statements
    }
});

edited Aug 14, 2012 at 6:53

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

answered Feb 24, 2011 at 11:09

Andrea

20.5k26 gold badges117 silver badges188 bronze badges

Collectives™ on Stack Overflow

jquery: onclick change background color

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related