$(this) toggleClass not working with .each?

您的代码正常工作，但可能不是您想要的方式。

我想把archbar2改成archbar。。。$(this).toggleClass("archbar")不工作。

如果要在类之间切换，则必须使用$.toggleClass()，并将现有类名和新类名作为参数。

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

这将把两个类切换到元素。

请参阅.toggleClass（）的jQuery文档，其中指出：

在的集合中的每个元素中添加或删除一个或多个类匹配的元素，取决于类的存在或state参数的值。

将toggleClass("archbar")更改为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>

您的类正在被添加，问题是来自archbar2的样式正在覆盖archbar类获得的任何样式。定义具有更高特异性的archbar类，它将覆盖archbar2。

在这种情况下，您可以将archbar类定义为div.archbar，请注意，尽管这会将样式限制为仅具有类archbar 的div

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

如果你想切换类，你只需要删除旧的类并添加新的

$(".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");

更高特异性演示

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>

根据.toggleClass（）文档，作为参数传入的类将是：

• 将添加到元素，如果该元素没有该类
• 从元素中删除，如果该元素具有该类

因此，您必须将archbar和archbar2作为参数传递给.toggleClass()，以便根据它是否存在于元素中来添加或删除它。

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