JavaScript类->数组迭代[重复]

Question

这是我在社区的第一个问题

大家好！ 现在我正在练习 JS 课程。 在下面的代码中，我想用编程语言课程制作产品卡片，我创建了包含必须添加到 html 正文的数据的数组，请参阅渲染类

const div = document.getElementById('app')
class Arguments {
constructor(title, img, depiction, price) {
    this.title = title
    this.img = img
    this.depiction = depiction
    this.price = price
}
}

class Render {
cards = [
    new Arguments('Python BootCamp', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7qKCjl9JJDnFDvf-U4Sv_YR5iXWGZbu-QRXNDZ5peS_Nusg8Sh8fb5lk5IbH9_MqSIIE&usqp=CAU', 'In this Complete Python course, you will learn everything you need to know about Python programming. You will start from very basics towards to the advance', 0.00,),
    new Arguments('JavaScript Crash Course', 'https://i.ytimg.com/vi/nN_qBdgmQpw/maxresdefault.jpg', 'A crach course by professional JS-DEVELOPER who"s wage $10000+', 300.00),new Arguments('JAVA COURSE', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvZ2DvlygW--TMKhrSO4SfA-6Op1QmVUXmh2dqtGxbHxPyvYH9elzpu-xGy2FOPac9VcE&usqp=CAU', 'A profi"s java totrial ', 70.00,),
]
render() {
    const ul = document.createElement('ul')
    const li = document.createElement('li')
        for (const elm of this.cards) {
            li.classList.add = 'card'
            li.innerHTML = `<h1>${elm.title}</h1><img src='${elm.img}'><p>${elm.depiction}</p><h3>${elm.price}</h3>`
            ul.append(li)
        }
    div.append(ul)
}
}
const Project = new ProductsList_Render
Project.render()

我遇到了一个问题！ 它只添加了数组的最后一个元素，但我们可以看到卡片的长度是 3。 我认为 for-of 循​​环只返回一个结果，但......

let array=[1,2]
for (const iterator of array) {
    console.log(iterator);
} 

如何解决。

Answer 1

不，您的代码中有一个小错误。看看下面更正的一个（也检查我的 cmets）。

问题是，您在 for 循环之前使用了 const li = document.createElement('li');。正如我们所知，我们必须为单个 ul 元素添加 N 次 li 元素，因此它不应该在 for 循环之外（就像我们只创建一个元素，所以它采用最后一个 ->覆盖旧的）。

我更新（移动了行）并尝试在https://www.w3schools.com/code/tryit.asp?filename=GSS60TDWYWL8 运行，它可以工作。

// Make sure you have an element with id `app` in HTML body.
const div = document.getElementById('app'); 

class Arguments {
    constructor(title, img, depiction, price) {
        this.title = title
        this.img = img
        this.depiction = depiction
        this.price = price
    }
}

class Render {
    cards = [
        new Arguments('Python BootCamp', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7qKCjl9JJDnFDvf-U4Sv_YR5iXWGZbu-QRXNDZ5peS_Nusg8Sh8fb5lk5IbH9_MqSIIE&usqp=CAU', 'In this Complete Python course, you will learn everything you need to know about Python programming. You will start from very basics towards to the advance', 0.00,),
        new Arguments('JavaScript Crash Course', 'https://i.ytimg.com/vi/nN_qBdgmQpw/maxresdefault.jpg', 'A crach course by professional JS-DEVELOPER who"s wage $10000+', 300.00),new Arguments('JAVA COURSE', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvZ2DvlygW--TMKhrSO4SfA-6Op1QmVUXmh2dqtGxbHxPyvYH9elzpu-xGy2FOPac9VcE&usqp=CAU', 'A profi"s java totrial ', 70.00,),
    ]
    render() {
        const ul = document.createElement('ul')
        // const li = document.createElement('li');
        for (const elm of this.cards) {
                let li = document.createElement('li'); // Use the above commented line here     
                li.classList.add('card');  // Not -> li.classList.add = 'card'
                li.innerHTML = `<h1>${elm.title}</h1><img src='${elm.img}'><p>${elm.depiction}</p><h3>${elm.price}</h3>`
                ul.append(li)
            }
        div.append(ul)
    }
}

const Project = new Render(); // Instantiation
Project.render(); // Call render() method

谢谢。

---

要在 JS 编程中使用更好的命名约定，请阅读此文档https://www.robinwieruch.de/javascript-naming-conventions。