如何修复jQuery代码输出undefined问题且无需在HTML中硬编码

代码中调用product.attr('data-type')获取自定义属性，但HTML中li元素的实际自定义属性为data-activity-type，属性名不匹配导致读取不存在的属性时返回undefined，拼接后就会在页面显示无效的undefined内容。

以下两种方案均无需修改现有HTML代码：

• 方案1：直接修正attr方法的属性名参数，适配现有HTML结构

$(document).ready(function () {
    var listItems = $("#productList li");
    listItems.each(function (idx, li) {
        var product = $(li);
        product.append(" - <b> ("+product.attr('data-activity-type')+") </b>");
    });
});

• 方案2：使用jQuery内置的data()方法读取自定义data属性，语法更简洁，该方法会自动识别data-前缀的属性，无需手动拼接前缀

$(document).ready(function () {
    var listItems = $("#productList li");
    listItems.each(function (idx, li) {
        var product = $(li);
        product.append(" - <b> ("+product.data('activity-type')+") </b>");
    });
});

内容的提问来源于stack exchange，提问作者Gus05