如何修复我的情况下的“Uncaught TypeError：无法读取未定义的属性（读取'0'）”错误

Question

所以我尝试创建构造函数，它将访问带有“key”类的 DOM 元素，并创建带有 css 属性数组的对象，我想通过构造函数将这些属性分配给类（我不知道这是否有意义，我仍然学习 OOP 所以可能都是错的）。这是我的代码：

const key = document.getElementsByClassName("key");

function Com(k1, k2, k3, k4, k5, k6, k7, k8) {
    this.key[0].style.translate = k1;
    this.key[1].style.translate = k2;
    this.key[2].style.translate = k3;
    this.key[3].style.translate = k4;
    this.key[4].style.translate = k5;
    this.key[5].style.translate = k6;
    this.key[6].style.translate = k7;
    this.key[7].style.translate = k8;
}

const coms = {
    com1: ['translate(290px, 290px)', 'translate(290px, 290px)', 'translate(290px, 290px)','translate(0, 0)', 'translate(0, -290px)', 'translate(-290px, 0)', 'translate(-290px, -290px)', 'translate(290px, 290px)'],
}

const temp = new Com(coms[0]); 

this.key[0]... 行显示错误未定义（读数 0）。

我检查了创建新对象是否错误，但这一行没有显示任何错误。另外，我已将 const 键更改为带有随机数的数组，并且发生了相同的错误。我将不胜感激任何帮助。

Answer 1

你应该传递一个数组并循环它的对象

const keys = document.getElementsByClassName("key");

function Com(translations) {
    for (let i = 0; i < translations.length; i++) {
        keys[i].style.transform = translations[i];
    }
}

const coms = {
    com1: ['translate(290px, 290px)', 'translate(290px, 290px)', 'translate(290px, 290px)', 'translate(0, 0)', 'translate(0, -290px)', 'translate(-290px, 0)', 'translate(-290px, -290px)', 'translate(290px, 290px)'],
};

const temp = new Com(coms.com1);