javascript - Getting data that is stored in several HTML elements -

javascript - Getting data that is stored in several HTML elements -

let's have 10 spans @ origin of page's body construction this:

(just reach easier jquery, didn't know how pass array json)

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

edit!: spans can changed else, inputs etc. , construction can changed, need reach img url , id

now, there's javascript function goes through array of words, , prints them out (search/suggestion/typeahead kind of thing). illustration of function:

function suggestiontemplate(context) { switch(displayfn(context)) { case "nike": homecoming "<p style='background-image:url(logos/nike_logo.png);'>" + displayfn(context) + "</p>"; break; case "spalding": homecoming "<p style='background-image:url(logos/spalding_logo.png);'>" + displayfn(context) + "</p>"; break; default: homecoming "<p>" + displayfn(context) + "</p>"; } }

so question, how can create function span class names (or can data-name etc.), , when displayfn(context) == 1 of span's class names homecoming <p> element span's data-img ?

please tell me if it's hard understand. i'm making kind of experiment , know if possible do.

if alter construction this, much easier:

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

then can info defined this:

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 } homecoming mem }, {})

this create data object construction this:

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

from that, should easy info javascript.

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

javascript php jquery html typeahead.js