Question

我想在扩展时在卡中实现卡内容，我已经使用JavaScript的帮助来实现标题，图像，描述，我已经使用了“数据标题”和“数据类型”来显示标题和图像分别工作正常，当我尝试使用data-desc属性实现卡描述时，它显示“未定义”。

任何人都请帮助我编写代码。我的代码链接：https://codepen.io/Avatar_73/pen/ExyNdMK

        const getCardContent = (title, type, desc) => {
            return `
                <div class="card-content">
                    <h2>${title}</h2>
                    <img src="./assets/${type}.png" alt="${title}">
                    <p>${desc}</p>
                </div>
            `;
        }

    <div class="cards">
        <div class="card" data-type="html" data-desc="I am HTML">
            <h2>HTML5</h2>
        </div>
   </div>

Answer 1

在第115行，您忘记了将desc传递给您的getCardContent函数

更改为：

const content = getCardContent(card.textContent, card.dataset.type, card.dataset.desc)

Answer 2

从更改您的调用方法签名

 getCardContent(card.textContent, card.dataset.type)

到

getCardContent(card.textContent, card.dataset.type, card.dataset.desc)

您没有在方法中传递第三个参数（card.dataset.desc），因此它将值呈现为undefined。

有没有一种方法可以通过JavaScript中的数据属性来实现？

2 个答案: