Use jQuery to change the background color when clicked

Question

Use jQuery to change the background color when clicked

Below is the HTML code with UL and LI elements:

<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>

When clicking on a specific <span>, we want its background color to change. For example, clicking on the span with id='select3' should change its background color.

Please provide guidance on how this can be achieved using jQuery.

javascript jquery css

Answer 1

Answer №1

Give this a shot:

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

The function of this code is to change the background color when clicking on the span within an li element that has an id starting with 'select'.

Answer 2

Give this a shot:

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

The function of this code is to change the background color when clicking on the span within an li element that has an id starting with 'select'.

Answer 3

Answer №2

Here's a helpful tip for you:

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

I hope this solution works for you.

To update my answer and apply the handler to each select element, consider adding an attribute to your span elements to represent color. For example:

<span rel="blue">Text</span>

. Then you can create a handler like this:

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

Answer 4

Here's a helpful tip for you:

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

I hope this solution works for you.

To update my answer and apply the handler to each select element, consider adding an attribute to your span elements to represent color. For example:

<span rel="blue">Text</span>

. Then you can create a handler like this:

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

Answer 5

Answer №3

Experiment with

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

Answer 6

Experiment with

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

Answer 7

Answer №4

To streamline the handling of multiple list elements, consider utilizing event delegation by only monitoring clicks on the ul. This approach allows you to:

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

Answer 8

To streamline the handling of multiple list elements, consider utilizing event delegation by only monitoring clicks on the ul. This approach allows you to:

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

Use jQuery to change the background color when clicked

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The persistent connection of Socket.io results in consecutive connections while disregarding other occurring events

Validation of VAT numbers using JavaScript instead of PHP

How to utilize DefinePlugin in Webpack to pass NODE_ENV value

Challenge with Redrawing the w2ui Grid

How can I assign a unique background color to each individual column within a RadioButtonList?

Tips for maintaining the fixed positioning of the left and right flex elements (sidebars) as the middle element scrolls, with the scroll bar located on the right side

Rails 5 not allow user submission of bootstrap modal form

Is there a way in vee-validate to validate specific sections of a form?

Sending a POST request to an API with Angular and passing an object as the payload

What is causing nested divs to generate a scrollbar?

Guide to modifying the root directory when deploying a Typescript cloud function from a monorepo using cloud build

Creating a Regular Expression that excludes all white spaces, including those at the start or end of the string

Utilizing Props in Vue.js to Access Data for v-model

The image fails to load when attempting to retrieve it from a local JSON file

Using JQuery to send an array to PHP and save it to a file

Struggling to establish a default value for an AngularJS select dropdown

Endless cycle in Vue-Router when redirecting routes

Add some TD(s) after the td element

Tips for optimizing caching of API responses and assets using service workers in Vue CLI 3

Struggling to implement JQuery code in a Next.js application