如何解决在以下情况下用JavaScript交换类时,为什么替换命令的顺序很重要?
我通过交换两个容器的类来交换它们的颜色。为此,我使用一个按钮来调用函数 swap()。
只要我先交换绿色容器的类,一切都可以正常工作。但是,当我颠倒顺序并从绿色按钮开始时,颜色不会交换而是保持原样(请参见下面我的源代码中的注释)。
如果有人可以帮助我理解这种行为,我将不胜感激。因为我将两个元素都存储在两个不同的变量(greenElement和redElement)中,所以我希望不必保持一定顺序。
订单为何重要?
function swap(){
var greenElement = document.getElementsByClassName("greenClass");
var redElement = document.getElementsByClassName("redClass");
redElement[0].classList.replace("redClass","greenClass");
greenElement[0].classList.replace("greenClass","redClass");
// IN THIS ORDER IT DOESN'T WORK
// greenElement[0].classList.replace("greenClass","redClass");
// redElement[0].classList.replace("redClass","greenClass");
}
.greenClass{
background:green;
}
.redClass{
background:red;
}
<div class="greenClass">green</div>
<div class="redClass">red</div>
<button type="button" onclick="swap()">click</button>
正如您在评论中看到的,我替换类的顺序很重要。
解决方法
如@charlietfl所述,getElementsByClassName
返回一个实时集合。
让我们采用第一种方法,
- 您的HTML最初是这样的
<div class="greenClass">green</div>
<div class="redClass">red</div>
- 现在,当执行以下语句时,
var greenElement = document.getElementsByClassName("greenClass");
var redElement = document.getElementsByClassName("redClass");
<div class="greenClass">green</div> // Represents greenElement[0]
<div class="redClass">red</div> // Represents redElement[0]
- 执行此语句后,
redElement[0].classList.replace("redClass","greenClass");
<div class="greenClass">green</div> // Represents greenElement[0]
<div class="greenClass">red</div> // Represents greenElement[1]
请注意,两个数组greenElement
和redElement
的实时更新方式使得greenElement
现在有2个元素,而redElement
有0个元素。
- 执行此语句后,
greenElement[0].classList.replace("greenClass","redClass");
<div class="redClass">green</div> // Represents redElement[0]
<div class="greenClass">red</div> // Represents greenElement[0]
现在,让我们来看第二种方法,
- 您的HTML最初是这样的
<div class="greenClass">green</div>
<div class="redClass">red</div>
- 现在,当执行以下语句时,
var greenElement = document.getElementsByClassName("greenClass");
var redElement = document.getElementsByClassName("redClass");
<div class="greenClass">green</div> // Represents greenElement[0]
<div class="redClass">red</div> // Represents redElement[0]
- 执行此语句后,
greenElement[0].classList.replace("greenClass","redClass");
<div class="redClass">green</div> // Represents redElement[0]
<div class="redClass">red</div> // Represents redElement[1]
请注意,两个数组greenElement
和redElements
的实时更新方式使得greenElement
现在有0个元素,而redElement
有2个元素。
- 执行此语句后,
redElement[0].classList.replace("redClass","greenClass");
<div class="greenClass">green</div> // Represents greenElement[0]
<div class="redClass">red</div> // Represents redElement[1]
希望,这可以帮助您理解。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。