获取存储在几个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) ==时，span的一个类名返回带有该span的data-img的<p>元素？

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

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>");
    }
}