Geek Answers Handbook

Best way to represent key / value pairs in HTML class names

I bind things to HTML objects using javascript and need a slightly more complex mechanism than just class names.

My first approach was to use class names, such as structure declarations, where the binding is at the position of the name like this:

Definition = identifier: foo bar baz

Encoding some class name using this definition gives

<p   id="someid"    class="identifier bish bash bosh">
<div id="anotherid" class="identifier heebie jeebie">

Then it can be read as:

{foo: bish,   bar: bash,   baz: bosh};
{foo: heebie, bar: jeebie}

Note that bindings have different parameter values.

It is very fragile. I can not decorate any html elements with additional names (for example, to add jquery behavior such as drag and drop, etc.) and, as a rule, a little cheesy ...

What I would like to do is represent them as key value pairs like this:

<p   id="someid"    class="id{foo:bish} id{bar:bash} id{baz:bosh} random class">
<div id="anotherid" class="ui-draggable id{bar:jeebie} id{foo:heebie}">

, GUID sorta ( " " ...)

, , classnames - CDATA, tickety-boo, ! ...

, , , KV , .

+5
5

HTML5 data- * , ( ).

http://ejohn.org/blog/html-5-data-attributes/

<li class="user" data-name="John Resig" data-city="Boston"
     data-lang="js" data-food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>
+4

Name , .

- :

keys: soft, hard, wet, hot
values: foo, bar, baz, fuzz

class="soft_bar wet_foo hot_fuzz"

, {,} , CSS .

+1

, ?, / attr

$("#someid").attr("key_val", "id{foo:bish} id{bar:bash} id{baz:bosh}");
0

HTML, , "class".

<p id="someid" foo="bish" bar="bash" baz="bosh">

jQuery :

$("#someid").attr("foo"); // "bish"
0

Could you surround the object in question with a div or span? Then use the id and / or class attributes to store name and value pairs and access them with the parent property.

<span id="foo_bar_baz" class="bish_bash_bosh"><p id="someid"></span>

This allows you to do what you want for the source object.

0
source

More articles:


All Articles