CODEWITHSUNDEEP
jquerycss
abcid d
abcid d

Reputation: 2953

toggleClass: Remove the Current Class and Add a New Class

I have a green box and replace by a red box by using toggleClass. Visually, the color changes but I need to remove a current class COMPLETELY in a div and add a new class by using toggleClass.

Problem: The current class is still there while it adds a new class in the inspector.

Please help

jsfiddles

HTML

<div class="green">

</div>

 <button id="click" value="Click">
 Click Me
 </button>

JS

$('#click').click(function() {
    $('.green').toggleClass('red');
  //$('.green').toggleClass('red green');
})

Upvotes: 0

Views: 67

Answers (4)

Abhishek Singh
Abhishek Singh

Reputation: 597

Try this, It Will replace remove the current class COMPLETELY.

var data = $('#target').attr('class');

$('#target').click(function(){
    ($(this).attr('class') == data) ? $(this).attr('class','green') : $(this).attr('class',data);
});
.blue{
   background: #17a2b8!important;
}
.green {
    background: #28a745!important;
}
h1{
    color:#fff;
    padding:15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="target" class="blue">Hello World</h1>

Upvotes: 1

Teocci
Teocci

Reputation: 8885

I notice that you are using toggleClass method. This method adds or remove s one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.

However, the way your are using it is wrong and here I will explain why. In your code you've used $('.green').toggleClass('red green'); this is going to work only once because when the div's class will change from .green to .red, there wont be div.green elements anymore and your script will not be applied again.

The solution is simple, just define an ID to the the element or apply an auxiliary class.

Adding an ID

Just define an ID for the div, for example element-id. This solution will toggle the .green and .red classes only for this element, like this:

$('#click').click(function() {
  $('#element-id').toggleClass('red green');
})
#element-id {
  height: 50px;
  width: 100px;
  margin: 25px;
}

.green {
  background: green;
}

.red {
  background: red;
}

#click {
  margin-left: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="element-id" class="green"></div>
<button id="click">Click Me</button>

With an auxiliary class

Just define an auxiliary class for the div like aux-class for this example. The advantage is that this can be applied to multiple elements like this:

$('#click').click(function() {
  $('.aux-class').toggleClass('red green');
})
.aux-class {
  height: 50px;
  width: 100px;
  margin: 25px;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.green {
  background: green;
}

.red {
  background: red;
}

#click {
  margin-left: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="aux-class green">DIV 1</div>
<div class="aux-class green">DIV 2</div>
<button id="click">Click Me</button>

Upvotes: 1

Aditya Thakur
Aditya Thakur

Reputation: 2610

if you are willing to use vanilla js, here's a vanilla js to achieve the toggle you are trying:

    <script>
    document.querySelector('#click').addEventListener('click', function(){
        let a = document.querySelectorAll('.colors')
        a.forEach((b)=>{
         if(b.classList.contains('green')){
           b.classList.remove('green')
           b.classList.add('red')
         }else if(b.classList.contains('red')){
           b.class.remove('red')
           b.class.add('green')
         }
      })
    })
    </script>


document.querySelector('#click').addEventListener('click', function(){
    let a = document.querySelectorAll('.colors')
    a.forEach((b)=>{
     if(b.classList.contains('green')){
       b.classList.remove('green')
       b.classList.add('red')
     }else if(b.classList.contains('red')){
       b.classList.remove('red')
       b.classList.add('green')
     }
  })
})
.colors{
   height:50px;
   width: 50px;
}
.green{
   background: green;
}
.red{
   background: red;
}
<div class="colors green"></div>
<button id="click">click</button>

Upvotes: 1

guradio
guradio

Reputation: 15555

  1. Add a different class or an id and use it to toggle between red and green classes

$('#click').click(function() {
  $('.toggle').toggleClass('red green');
})
.red {
  background-color: red
}

.green {
  background-color: green
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle green">
qwewqewq
</div>

<button id="click" value="Click">
 Click Me
 </button>

Upvotes: 1

Related Questions