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

不，您的代码中有一个小错误。查看以下更正的内容（也请查看我的评论）。

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

<块引用>

我更新（移动了行）并尝试在 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。

JavaScript 类 -> 数组迭代

1 个答案: