Question

您好我有一些名为archbar2的div，我想使用.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
{
	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>

请查看此示例并告诉我它无法正常运行的原因。 Greatings

Answer 1

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

我想将班级archbar2更改为archbar ... $(this).toggleClass("archbar")无效。

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

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

将两个类切换到元素。

请参阅.toggleClass()的jQuery文档，其中指出：

在集合中的每个元素中添加或删除一个或多个类匹配的元素，取决于类的存在或国家论点的价值。

Answer 2

您的课程已添加，问题是archbar2的样式会覆盖archbar课程获得的任何样式。使用higher specificity定义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>

Answer 3

根据.toggleClass() documentation，作为参数传入的类将是：

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

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

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

Answer 4

将toggleClass("archbar")更改为toggleClass("archbar2 archbar")

＆＃13;

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");
        }
    })

});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

4 个答案: