jquery: onclick change background color

I have following UL - LI html.

<UL&开发者_高级运维gt;
<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?

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.

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')})});

Try

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

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
    }
});