$（this）toggleClass不能与.each一起使用？

Question

你好，我有一些divs叫archbar2，我想改变它使用.each循环，但我没有从JavaScript方面的反应。之前一切都在工作，因为警报效果很好。为什么我的班级没有改变？

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 
 
{ 
 
\t width: 50vw; 
 
\t height: 13vw; 
 
\t background-color: #1274B2; 
 
\t text-align: center; 
 
\t padding-top: 0.5vw; 
 
\t margin-top: 2vw; 
 
\t position: relative; 
 
} 
 

 
.archbar2 
 
{ 
 
\t width: 50vw; 
 
\t height: 13vw; 
 
\t background-color: rgba(50,50,50,1); 
 
\t text-align: center; 
 
\t padding-top: 0.5vw; 
 
\t margin-top: 2vw; 
 
\t 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>

请看看下面这个例子，告诉我，为什么它不能正常运行。 Greatings

Answer 1

您的课程已添加，问题是archbar2的样式正在覆盖archbar类获得的任何样式。用higher specificity定义archbar类，它将覆盖archbar2。

在这种情况下，你可以定义你archbar类为div.archbar，不过要注意这将样式限制为仅div的带班archbar

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 
 
{ 
 
\t width: 50vw; 
 
\t height: 13vw; 
 
\t background-color: #1274B2; 
 
\t text-align: center; 
 
\t padding-top: 0.5vw; 
 
\t margin-top: 2vw; 
 
\t position: relative; 
 
} 
 

 
.archbar2 
 
{ 
 
\t width: 50vw; 
 
\t height: 13vw; 
 
\t background-color: rgba(50,50,50,1); 
 
\t text-align: center; 
 
\t padding-top: 0.5vw; 
 
\t margin-top: 2vw; 
 
\t 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>

Answer 2

您的代码，它应该工作，但可能不是你想要的方式运行。

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

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

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

这将切换两个类的元素。

见.toggleClass() jQuery的文档的规定：

添加或从每个元素的集合中的 匹配元素删除一个或多个类，取决于任一类的存在或状态的 值论据。

Answer 3

作为每.toggleClass() documentation，通过在作为参数的一类将是：

• 加入到元件如果该元素不具有类。
• 删除从元素如果该元素具有该类。

因此，你必须通过archbar和archbar2作为参数传递给.toggleClass()，这样它会被添加或基于它是否存在或不存在的元素上删除。

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

Answer 4

变化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 
 
{ 
 
\t width: 50vw; 
 
\t height: 13vw; 
 
\t background-color: #1274B2; 
 
\t text-align: center; 
 
\t padding-top: 0.5vw; 
 
\t margin-top: 2vw; 
 
\t position: relative; 
 
} 
 

 
.archbar2 
 
{ 
 
\t width: 50vw; 
 
\t height: 13vw; 
 
\t background-color: rgba(50,50,50,1); 
 
\t text-align: center; 
 
\t padding-top: 0.5vw; 
 
\t margin-top: 2vw; 
 
\t 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>