Using jQuery to update the CSS background of a selected element among multiple elements sharing the same class

Question

Using jQuery to update the CSS background of a selected element among multiple elements sharing the same class

I am currently developing a basic jQuery script that will enable the background color of the clicked element to change.

Below is the code I have so far:

<dt>
<input id="p_method_banktransfer" value="banktransfer" type="radio" name="payment[method]" title="Bank Payment"  class="radio validation-passed" autocomplete="off"/>ev
<label for="p_method_banktransfer">Банков превод </label>
</dt>

I have multiple <dt>...</dt> tags

Here is the CSS for <dt>:

.opc-wrapper-opc .payment-block dt { 
background: #3399CC;
border-radius: 2px;
margin: 0px 0px 13px;
position: relative;
}

It appears that when clicking on the label or input, I want to change the background color of the dt element. How can I achieve this?

javascript jquery html css

Answer 1

Answer №1

$('section').on('tap', 'h2', function(){
  $(this).css('background','blue'); // choose a different color from blue
});

UPDATE

If you want to revert all <h2/> EXCEPT the one clicked back to their original color:

$('section').on('tap', 'h2', function(){
  $('h2').not(this).css('background', '#FF6600'); // reset to original color
  $(this).css('background','blue'); // choose a different color than blue
});

Answer 2

$('section').on('tap', 'h2', function(){
  $(this).css('background','blue'); // choose a different color from blue
});

UPDATE

If you want to revert all <h2/> EXCEPT the one clicked back to their original color:

$('section').on('tap', 'h2', function(){
  $('h2').not(this).css('background', '#FF6600'); // reset to original color
  $(this).css('background','blue'); // choose a different color than blue
});

Using jQuery to update the CSS background of a selected element among multiple elements sharing the same class

Answer №1

Similar questions

What causes the axios Library to fail in initiating a request if the API call does not begin with "https://"?

Leveraging PrimeFaces and the p:ajax component, trigger Ajax within an inputText field only when keystrokes lead to changes in the field

Run the function multiple times by substituting a portion of the argument in a sequential

Creative Vue.js and Tailwind CSS card layout featuring an image extending beyond the boundaries of the card

Customizing Eclipse Outline View for Cascading Style Sheets (CSS) Files

In what way does ReactJS enable me to utilize constant functions before they are declared?

Bootstrap 5 introduces an innovative animated hamburger icon that transforms into an X symbol when clicked

Utilizing Intel's App-Framework for Dynamic JSON Data Presentation

Are there alternative approaches to launching processes aside from the functions found in child_process?

Can you tell if there are any distinctions between the two code snippets?

Data retrieval takes precedence over data insertion

When attempting to call Firebase Functions, ensure that Access-Control-Allow-Origin is set up correctly

Break apart PDFs into individual images or convert to HTML

Exploring vuelidate: demonstrating personalized validation messages alongside pre-built validators

How can JSON-loaded scripts be executed using jQuery?

Display information in a table format by utilizing local storage with jQuery

Issues surrounding the break function in PHP and Jquery

Learn how to organize a div element containing select options using categories such as gender and shoe size, similar to the filtering

Why doesn't the WordPress Genesis child-theme inherit the parent CSS styles?

Incorporating promises with ajax to enhance functionality in change events