CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Giordano
Giordano

Reputation: 5570

Change class group of buttons

I have three buttons and each one has a CSS class. At click of one of them, i would like remove the class and add a new CSS class only for the clicked element. Furthermore, I need to keep pressed the selected button. I searched some examples and I found that is possible do something like this:

$(".class").removeClass("choice").addClass("active");

This works for all buttons, but not only for one. I try to change this in 

$(this).removeClass("choice").addClass("active");

but this didn't work.

I make a fiddle for more compreansion: https://jsfiddle.net/90u6b3tj/3/

EDIT I need the same behavior when i press a second time

Sorry for the basic problem.

Thanks in advance

Regards

Upvotes: 2

Views: 207

Answers (6)

kaito
kaito

Reputation: 291

Should it possible so select more than one item as active? If not, checkout this:

Markup

<div>
  <button id="hourly" class="choice">Orario</button>
</div>

<div>
  <button id="daily" class="choice">Giornaliero</button>
</div>

<div>
  <button id="monthly" class="choice">Mensile</button>
</div>

CSS

.active { 
    background-color: #A60076;
    color: #FF0000;
}

.choice {
  background-color: #000000;
    color: #FFFFFF;
}

JS

$(document).ready(function() {
  $('button').click(function(e) {
    $("button").addClass('choice').removeClass('active');
    $(this).removeClass('choice').addClass('active');
  });
});

Here is a sample fiddle with the above code working.

Upvotes: -1

Artifex404
Artifex404

Reputation: 106

I've updated your jsfiddle for a working solution:

https://jsfiddle.net/90u6b3tj/10/

Here's the javascript part:

$(function() {
    $("button").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
    });
});

Upvotes: 3

saikumar
saikumar

Reputation: 1051

function change(event){
  event.preventDefault();
  //$(".choice").removeClass("choice").addClass("active");
  $(event.target).removeClass("choice").addClass("active");
}
<div>
  <button id="hourly" class="choice" onclick="change(event)">Orario</button>
</div>

<div>
  <button id="daily" class="choice" onclick="change(event)">Giornaliero</button>
</div>

<div>
  <button id="monthly" class="choice" onclick="change(event)">Mensile</button>
</div>

Upvotes: 0

BenG
BenG

Reputation: 15154

as you are adding your click events like so:-

<button id="hourly" class="choice" onclick="change()">Orario</button>

you could use event.target:-

function change(){
  event.preventDefault();
  $(event.target).removeClass("choice").addClass("active");
}

OR, change your event and pass in this:-

<button id="hourly" class="choice" onclick="change(this)">Orario</button>

so you can do:-

function change(element){
  event.preventDefault();
  $(element).removeClass("choice").addClass("active");
}

OR better still:-

$('.choice').click(function(e){
    e.preventDefault();
    $(this).removeClass("choice").addClass("active");
});

and remove the inline click event.

Upvotes: 1

Aer0
Aer0

Reputation: 3907

You may use change(this) in your button markup and refer to that element in your change() function, as shown in this fiddle.

Upvotes: 0

Imesha Sudasingha
Imesha Sudasingha

Reputation: 3570

You can use the following code instead.

$(".class").click(function(){
    $(".class").addClass("choice");
    $(".class").removeClass("active");
    $(this).removeClass("choice").addClass("active");
});

Here, the "choice" class is removed only from the clicked class. Not from the others. Also the "active" class is added to the clicked one.

Upvotes: 0

Related Questions