JavaScript - 类切换正在删除类而不是在下次单击时添加

Question

我在带有 class=glyphcolor 的 i 标签上设置了一个事件监听器我想做的是，每当我看到类 checkglyph1 的元素时，它必须切换类，即如果类存在，则必须删除，如果不存在，则添加.checkglyph1 类的作用是更改文本的颜色。

实际结果

( image to the output I get )

第一次点击时，我看到默认情况下第一个元素在此处切换，我已经设置了它。下次点击时，它会被删除而不是切换。

HTML 部分:

<div class="row datasection">
    <div class="todo">
        <div class="databox col s6 waves-effect">
            <p class="checkglyph1 ">Task to do</p>
            <!--   </div>  -->
            <a>
                <i class="material-icons checkglyph checkglyph1 glyphcolor">check</i>
            </a>
        </div>
    </div>
</div>           

JS:

var glyph= document.querySelector('.glyphcolor');
var par=  document.getElementsByClassName('checkglyph1');
console.log(par[0]);
console.log(par[1]);
glyph.addEventListener('click', function () {
    /* body... */
    console.log("Qw");
    par[0].classList.toggle("checkglyph1");
    console.log(par[0]);
    par[1].classList.toggle("checkglyph1");

})

CSS:

.datasection .todo .databox {
    background-color: teal;
    margin-left: 120px;
    border-radius: 10px;
    position: relative;
    display: inline-block;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.databox p{
    display: inline-block;
}

.databox a .checkglyph{
    display: inline-block;
    color: yellow;
    position: absolute;
    left: 90%;
    top: 25%;
}

.databox a .checkglyph:hover{
    display: inline-block;
}

.databox a .checkglyph1{
    display: inline-block;
    color: white;
    cursor: pointer;
}

.databox .checkglyph1{
    color: white;
    cursor: text;
}

Answer 1

getElementsByClassName 是一个 LIVE Html 集合。删除类，该元素从集合中删除。

var elems = document.getElementsByClassName("foo")
console.log("before", elems.length);
elems[0].classList.remove("foo");

console.log("after", elems.length);

.foo { color: red; }

<div class="foo">1</div>
<div class="foo">2</div>