JavaScript有没有通过数据属性实现的方法？

Question

我想在扩展时在卡片中实现卡片内容，我使用了 JavaScript 的帮助来实现标题、图像、描述，我使用了 'data-title' 和 'data-type' 分别显示标题和图像，工作正常，当我尝试使用 data-desc 属性实现卡片描述时，它显示 'undefined'.

任何人请帮助我的代码。我的代码link：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有没有通过数据属性实现的方法？

Is there a method to implement through data attributes in JavaScript?

javascript

html

css

custom-data-attribute