CODEWITHSUNDEEP
javascriptjquery
Artimal
Artimal

Reputation: 661

$(this) toggleClass not working with .each?

Hello I have some divs called archbar2 and I want to change it using .each loop but I have no reaction from javascript side. Everything is working before because alerts works great. Why my class is not changing?

jQuery(document).ready(function() {
    var aktywator=0;
    var punkty = 333;
    if(punkty>=10 && punkty<300) aktywator = 0;
    if(punkty>=300 && punkty<800) aktywator = 1;
    if(punkty>=800 && punkty<2000) aktywator = 2;
    if(punkty>=2000 && punkty<5000) aktywator = 3;
    if(punkty>=5000 && punkty<10000) aktywator = 4;
    if(punkty>=10000) aktywator = 5;
    alert(aktywator);
    $('.archbar2').each(function(id) {
        
        if(aktywator==id)
        {
            alert("id=" + id + " aktywator=" + aktywator);
            $(this).toggleClass("archbar");
        }
    })

});
.archbar
{
	width: 50vw;
	height: 13vw;
	background-color: #1274B2;
	text-align: center;
	padding-top: 0.5vw;
	margin-top: 2vw;
	position: relative;
}

.archbar2
{
	width: 50vw;
	height: 13vw;
	background-color: rgba(50,50,50,1);
	text-align: center;
	padding-top: 0.5vw;
	margin-top: 2vw;
	position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<div class="archbar2">

</div>
</center>

<center>
<div class="archbar2">

</div>
</center>

<center>
<div class="archbar2">
</div>
</center>

Please look at this example and tell me why it can not run correctly. Greatings

Upvotes: 0

Views: 109

Answers (4)

Cristiano Mendon&#231;a
Cristiano Mendon&#231;a

Reputation: 1282

As per .toggleClass() documentation, a class passed in as argument will be:

  • added to the element if that element doesn't have that class.
  • removed from the element if that element has that class.

Thus you must pass both archbar and archbar2 as parameter to .toggleClass() so that it will be added or removed based on whether it's present or not on the element.

$(this).toggleClass("archbar archbar2");

Upvotes: 0

Patrick Evans
Patrick Evans

Reputation: 42736

Your class is getting added, the problem is the styles from archbar2 are overriding any styles that are gained by archbar class. Define the archbar class with a higher specificity and it will override archbar2.

In this case you could define your archbar class as div.archbar, note though this would limit the style to only div's with class archbar

div.archbar
{
    width: 50vw;
    height: 13vw;
    background-color: #1274B2;
    text-align: center;
    padding-top: 0.5vw;
    margin-top: 2vw;
    position: relative;
}

If you wanted to switch the classes you would just remove the old class and add the new one

$(".archbar2").removeClass("archbar2").addClass("archbar");
//Or just pass both classes to toggleClass if you are going to
//be toggling between both.
$(".archbar2").toggleClass("archbar2 archbar");

Higher Specificity demo

jQuery(document).ready(function() {
    var aktywator=0;
    var punkty = 333;
    if(punkty>=10 && punkty<300) aktywator = 0;
    if(punkty>=300 && punkty<800) aktywator = 1;
    if(punkty>=800 && punkty<2000) aktywator = 2;
    if(punkty>=2000 && punkty<5000) aktywator = 3;
    if(punkty>=5000 && punkty<10000) aktywator = 4;
    if(punkty>=10000) aktywator = 5;
    alert(aktywator);
    $('.archbar2').each(function(id) {
        
        if(aktywator==id)
        {
            alert("id=" + id + " aktywator=" + aktywator);
            $(this).toggleClass("archbar");
        }
    })

});
div.archbar
{
	width: 50vw;
	height: 13vw;
	background-color: #1274B2;
	text-align: center;
	padding-top: 0.5vw;
	margin-top: 2vw;
	position: relative;
}

.archbar2
{
	width: 50vw;
	height: 13vw;
	background-color: rgba(50,50,50,1);
	text-align: center;
	padding-top: 0.5vw;
	margin-top: 2vw;
	position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<div class="archbar2">

</div>
</center>

<center>
<div class="archbar2">

</div>
</center>

<center>
<div class="archbar2">
</div>
</center>

Upvotes: 0

Raja Khoury
Raja Khoury

Reputation: 3195

Change toggleClass("archbar") to toggleClass("archbar2 archbar") 

jQuery(document).ready(function() {
    var aktywator=0;
    var punkty = 333;
    if(punkty>=10 && punkty<300) aktywator = 0;
    if(punkty>=300 && punkty<800) aktywator = 1;
    if(punkty>=800 && punkty<2000) aktywator = 2;
    if(punkty>=2000 && punkty<5000) aktywator = 3;
    if(punkty>=5000 && punkty<10000) aktywator = 4;
    if(punkty>=10000) aktywator = 5;
    //alert(aktywator);
    $('.archbar2').each(function(id) {
        
        if(aktywator==id)
        {
            //alert("id=" + id + " aktywator=" + aktywator);
            $(this).toggleClass("archbar2 archbar");
        }
    })

});
.archbar
{
	width: 50vw;
	height: 13vw;
	background-color: #1274B2;
	text-align: center;
	padding-top: 0.5vw;
	margin-top: 2vw;
	position: relative;
}

.archbar2
{
	width: 50vw;
	height: 13vw;
	background-color: rgba(50,50,50,1);
	text-align: center;
	padding-top: 0.5vw;
	margin-top: 2vw;
	position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<div class="archbar2">

</div>
</center>

<center>
<div class="archbar2">

</div>
</center>

<center>
<div class="archbar2">
</div>
</center>

Upvotes: 0

Daniel B
Daniel B

Reputation: 8879

Your code is working as it should, but probably not the way you want it to.

I want to change class archbar2 to archbar... $(this).toggleClass("archbar") is not working.

If you want to switch between to classes, you'd have to use $.toggleClass() with the existing class name as an argument as well as the new class name. 

$(this).toggleClass("archbar").toggleClass("archbar2");

Which will toggle both the classes to the element.

See the jQuery documentation of .toggleClass() which states:

Add or remove 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.

Upvotes: 1

Related Questions