Adding classes conditionally with jQuery

Question

Adding classes conditionally with jQuery

Currently, I am working on a frontend project that involves jQuery. I have a list of names and I want to add a class of "selected" when one is clicked. However, if another name is selected, the class should be removed from the previously selected name and added to the new selection. Since there are multiple names, creating individual functions for each option is not feasible. Is there an easier way to achieve this functionality?

HTML

 <ul class="names">
                    <li class="name selected">Name-1</li>
                    <li class="name">Name-2</li>
                    <li class="name">Name-3</li>
                </ul>

CSS

.selected {
    background-color: rgba(0, 0, 0, 0.3);
}

html jquery css conditional-statements

Answer 1

Answer №1

To achieve this functionality, follow these steps:

$("ul.items li").on("click", function(){
   $("ul.items li").removeClass("active");
   $(this).addClass("active");
})

UPDATE - clarification In the provided code snippet, the selection of all <li> elements within the ul.items is targeted. Subsequently, the script removes the active class from all li tags using

$("ul.items li").removeClass("active");

, followed by adding the active class specifically to the clicked li element denoted by the this keyword.

$("ul.items li").on("click", function() {
  $("ul.items li").removeClass("active");
  $(this).addClass("active");
})

.active {
  background-color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="items">
  <li class="item active">Item-1</li>
  <li class="item">Item-2</li>
  <li class="item">Item-3</li>
</ul>

Answer 2

To achieve this functionality, follow these steps:

$("ul.items li").on("click", function(){
   $("ul.items li").removeClass("active");
   $(this).addClass("active");
})

UPDATE - clarification In the provided code snippet, the selection of all <li> elements within the ul.items is targeted. Subsequently, the script removes the active class from all li tags using

$("ul.items li").removeClass("active");

, followed by adding the active class specifically to the clicked li element denoted by the this keyword.

$("ul.items li").on("click", function() {
  $("ul.items li").removeClass("active");
  $(this).addClass("active");
})

.active {
  background-color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="items">
  <li class="item active">Item-1</li>
  <li class="item">Item-2</li>
  <li class="item">Item-3</li>
</ul>

Answer 3

Answer №2

If you're looking for a solution, try this approach.

$('.name').on('click', function() {
  $('.name').removeClass('selected').css('background','none');
  $(this).addClass('selected').css('background',$(this).data('bg'));
});
$('.name.selected').css('background',$('.name.selected').data('bg'));

.selected {
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="names">
    <li class="name selected" data-bg="green">Name-1</li>
    <li class="name" data-bg="red">Name-2</li>
    <li class="name" data-bg="blue">Name-3</li>
</ul>

Answer 4

If you're looking for a solution, try this approach.

$('.name').on('click', function() {
  $('.name').removeClass('selected').css('background','none');
  $(this).addClass('selected').css('background',$(this).data('bg'));
});
$('.name.selected').css('background',$('.name.selected').data('bg'));

.selected {
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="names">
    <li class="name selected" data-bg="green">Name-1</li>
    <li class="name" data-bg="red">Name-2</li>
    <li class="name" data-bg="blue">Name-3</li>
</ul>

Adding classes conditionally with jQuery

Answer №1

Answer №2

Similar questions

Having trouble with JQuery blur and enter key functionality not working properly

Rotate image in Vue3 using @click

Unlock the power of automatic code reloading in Rails with these simple steps

What's the reason behind the malfunction of this code on Chrome?

Shuffle various div elements in a random pattern using jQuery

Using jQuery FancyBox in combination with Ajax

Use the Window.print function to easily print a HTML page to the printer

When adding multiple forms to a table, only the final form submission is successfully inserted

What's wrong with this jQuery plugin, it should be so simple?

Is it possible for the vertical borders of <span> to overlap?

What is the best way to transform the HTML retrieved from an AJAX GET request into an object using JQuery?

Difficulty parsing data from a JSON file using JavaScript

Guide to Enforcing Mandatory Input on Text Fields within JQuery Modal Box

The overflow phenomenon similar to what can be found in Photoshop

I'm puzzled as to why my fixed element is gravitating towards the right side of the entire screen instead of aligning with the right side of its parent element

Discovering the best way to organize and sort information retrieved from the backend within an Angular

Best practice is to include the script on a page that is being loaded through ajax

Getting Ajax response in HTML Unit can be achieved by leveraging its capability to render the HTML content of the web page

Spring is experiencing an issue with the button functionality

Having trouble with my navbar toggler arrow malfunctioning