获取存储在多个 HTML 元素中的数据

Question

假设我在页面body 的开头有 10 个跨度，其结构如下：

（只是为了更容易使用 Jquery，不知道如何使用 JSON 传递数组）

<span class="nike" data-img="logos/nike_logo.png" data-id="10"></span>

编辑！：跨度可以更改为其他任何内容，输入等，并且可以更改结构，只需要到达 img url 和 id

现在，有一个 Javascript 函数可以处理一组单词，并将它们打印出来（搜索/建议/提前输入之类的东西）。函数示例：

function suggestionTemplate(context) {

            switch(displayFn(context)) {

                case "nike":

                    return "<p style='background-image:url(logos/nike_logo.png);'>" 
                            + displayFn(context) + "</p>";
                    break;

                case "spalding":

                    return "<p style='background-image:url(logos/spalding_logo.png);'>" 
                    + displayFn(context) + "</p>";

                    break;

                default:
                    return "<p>" + displayFn(context) + "</p>";
            }

}

所以问题是，我怎样才能让这个函数获取所有span 类名（或者它可以是数据名等），然后当displayFn(context) == 跨度的类名之一返回<p>具有该跨度 data-img 的元素？

如果太难理解，请告诉我。我只是在做一个实验，想知道这是否可行。

Answer 1

如果你像这样改变结构，那就容易多了：

<span class="js-app-data" data-name="nike" data-img="logos/nike_logo.png" data-id="10"></span>

然后你可以像这样得到你定义的所有数据：

data = Array.prototype.reduce.call(document.querySelectorAll('.js-app-data'), function(mem, e){
    mem[e.dataset.name] = {
        img: e.dataset.img,
        id: e.dataset.id
    }
    return mem
}, {})

这将使data 成为一个具有如下结构的对象：

{nike: {img:'logos/nike_logo.png', id:'10'}, ...}

由此，从 javascript 中获取数据应该很容易。

function suggestionTemplate(context) {
    if (context.name in data) {
        return ("<p style='background-image:url("+ data[context.name].img +");'>" 
                + context.name + "</p>");
    }
}