无法在JS CLASS中使用dom修改吗？

Question

我只是试图将我的意大利面条代码重写为js类。这里出了什么问题，但我不知道这是什么。有人可以检查吗？

    class dmlMenu {
    constructor(){
       this.toggleStatus = false;
       this.h = -100;
       this.b = -100;
       this.domEls = document.getElementsByClassName('v_navEl');
    }
    toggleMenu(){
       if(this.toggleStatus){
            this.domEls.forEach( e => {    
                e.removeAttribute('style');
            });
            this.toggleStatus = false;
        } else {
           this.domEls.forEach( e => {    
            e.style.transform = 'translate(' + this.h + 'px , ' + this.b + 'px )';
                this.h = this.h+50;
                this.b = this.b-50;
            });
            this.toggleStatus = true; 
            this.h = -100;
            this.b = -100;
        } 
    }
}

let menu = new dmlMenu();
// Event Listener
document.getElementById('v_addBtn').addEventListener('click', menu.toggleMenu());

https://codepen.io/digimedialoop/pen/GRJWOGo

Answer 1

您的代码中有两个错误：

首先，您错误地调用了toggleMenu()：在作为回调的匿名函数中执行：

document.getElementById('v_addBtn').addEventListener('click', menu.toggleMenu());

此外，document.getElementsByClassName()方法返回NodeList，并且.forEach()不存在。您可以先将它们转换为数组，即：

Array.from(this.domEls).forEach(e => {
    // Rest of the logic here
});

在此处查看固定的示例：

class dmlMenu {
    constructor(){
       this.toggleStatus = false;
       this.h = -100;
       this.b = -100;
       this.domEls = document.getElementsByClassName('v_navEl');
    }
    toggleMenu(){
       if(this.toggleStatus){
            Array.from(this.domEls).forEach( e => {    
                e.removeAttribute('style');
            });
            this.toggleStatus = false;
        } else {
           Array.from(this.domEls).forEach( e => {    
            e.style.transform = 'translate(' + this.h + 'px , ' + this.b + 'px )';
                this.h = this.h+50;
                this.b = this.b-50;
            });
            this.toggleStatus = true; 
            this.h = -100;
            this.b = -100;
        } 
    }
}

let menu = new dmlMenu();
// Event Listener
document.getElementById('v_addBtn').addEventListener('click', () => menu.toggleMenu());

#v_menu {
  width: 400px;
  height: 400px;
  position: relative;
  font-size: 2rem;
}
#v_menu .v_Btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15%;
  height: 15%;
  border-radius: 50%;
}
#v_menu .v_Btn i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#v_menu .v_Btn i .active {
  transition: 1s;
}
#v_menu .v_navEl {
  z-index: 50;
  background-color: #67caac;
  color: white;
  font-size: 1rem;
  border: 2px solid #67caac;
}
#v_menu #v_addBtn {
  z-index: 100;
  background-color: #454545;
  color: white;
  border: 2px solid #454545;
}
#v_menu #v_addBtn:hover {
  background-color: white;
  color: #454545;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<div id="v_menu">
    <div id="v_addBtn" class="v_Btn">
        <i class="fas fa-plus"></i>
    </div>
    <div class="v_navEl v_Btn">
        <i class="far fa-building"></i>
    </div>

    <div class="v_navEl v_Btn">
        <i class="fas fa-tasks"></i>
    </div>
    <div class="v_navEl v_Btn">
        <i class="fas fa-project-diagram"></i>
    </div>
</div>