CODEWITHSUNDEEP
javascriptjqueryhtml
DixiD
DixiD

Reputation: 1

Changing classes with jQuery but the element doesn't change color?

I was in the middle of self studying HTML, CSS and JavaScript when at my job, an interviewer came to me and suggested to study jQuery as it was the “standard” now days.

So I decided to do that and started to migrate my own web page project for a future game I'm going to make, to jQuery, and it is pretty easy to understand so far and made me compress 150 or so lines of javaScript into 70 (more or less).

Now I am trying to add a class to a button when clicked using jQuery, for that I am using:

$(this).addClass("buttonActive");

In CSS, the button is:

.menu .buttonActive {
background-color: #222629;
}

When clicking the button, the buttin does change color, and that is perfect, but I wanted to make so that the color changes to the original one once I click another button, but it is not working. For that I am using:

$("#buttonClicked").removeClass("buttonActive");

I also tried adding another class together when removing the buttonActive but it didn't work.

$("#buttonClicked").removeClass("buttonActive").addClass("buttonNotActive");

.buttonNotActive {
background-color: #10394E;
}

Upvotes: 0

Views: 1022

Answers (4)

DixiD
DixiD

Reputation: 1

Thanks to everyone who answered. Thanks to the ideas, I thought of selecting all buttons from my page and removing the buttonActive class

$(:button).removeClass("buttonActive");
$(this).addClass("buttonActive");

Upvotes: 0

Fraction
Fraction

Reputation: 12984

Try this example:

  1. First remove buttonActive class from all buttons except the clicked one
  2. Toggle buttonActive class for the clicked button 

$(".myButton").click(function() {
  $(".myButton").not($(this)).removeClass('buttonActive');
  $(this).toggleClass("buttonActive");
})
.menu .buttonActive {
background-color: #222629;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <button class="myButton">My button</button>
  <button class="myButton">My button</button>
  <button class="myButton">My button</button>

</div>

Upvotes: 2

DubVader
DubVader

Reputation: 1072

Add a class to each of the elements that would be clicked. Use that class for the click function. When that element is clicked, remove the active class from the elements, and apply it to the element that was clicked.

In this example when you click on one of the elements its background will change to red. If you click on another element, it returns to its original color. 

$( ".menu-item" ).click(function() {
    
    $(".menu-item").removeClass("buttonActive");
    $(this).addClass("buttonActive");

});
.item-1 {
  background-color: green;
}

.item-2 { 
 background-color: orange;
}

.item-3 {
 background-color: purple;
}

.menu p {
 color: #fff;
}

.buttonActive {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="menu">
  <p class="item-1 menu-item">Item 1</p>
  <p class="item-2 menu-item">Item 2</p>
  <p class="item-3 menu-item">Item 3</p>
</div>

Upvotes: 0

Narek
Narek

Reputation: 263

I didn't understand well. Like this?

$("#buttonClicked").click(function(){
  $(this).addClass("buttonActive");
})
$("#change").click(function(){
  $("#buttonClicked").removeClass("buttonActive");
})
.menu .buttonActive {
background-color: #222629;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <button id="buttonClicked">Button</button>
  <button id="change">Change</button>
</div>

Upvotes: 0

Related Questions