blocks|key|487002|text|实际上，您的最后一个示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|487003|<div+data-foobar='{"foo":"bar"}'></div>|code-block|syntax|javascript|487004|似乎运行良好(参见http://jsfiddle.net/GlauberRocha/Q6kKU/)。|offset|length|487005|有趣的是，data-+attribute中的字符串会自动转换为JavaScript对象。相反，我看不出这种方法有什么缺点！一个属性足以存储整个数据集，随时可以通过对象属性在JavaScript中使用。|487006|(注意:对于自动赋予类型Object而不是String的数据属性，必须小心编写有效的JSON，特别是要用双引号将键名括起来)。|487007|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/GlauberRocha/Q6kKU/^0|0|0|9|13|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>Actually, your last example:</p>

<pre><code>&lt;div data-foobar='{"foo":"bar"}'&gt;&lt;/div&gt;
</code></pre>

<p>seems to be working well (see <a href="http://jsfiddle.net/GlauberRocha/Q6kKU/">http://jsfiddle.net/GlauberRocha/Q6kKU/</a>).</p>

<p>The nice thing is that the string in the data- attribute is automatically converted to a JavaScript object. I don't see any drawback in this approach, on the contrary! One attribute is sufficient to store a whole set of data, ready to use in JavaScript through object properties.</p>

<p>(Note: for the data- attributes to be automatically given the type Object rather than String, you must be careful to write valid JSON, in particular to enclose the key names in double quotes).</p>


blocks|key|702785|text|使用documented+jquery+.data(obj)+syntax允许您在DOM元素上存储对象。检查元素不会显示data-属性，因为没有为对象的值指定键。但是，对象中的数据可以使用.data("foo")按键引用，也可以使用.data()返回整个对象。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|702786|因此，假设您设置了一个循环和result[i]+=+{+name:+"image_name"+}：|702787|$('.delete')[i].data(results[i]);+//+=>+<button+class="delete">Delete</delete>
$('.delete')[i].data('name');+//+=>+"image_name"
$('.delete')[i].data();+//+=>+{+name:+"image_name"+}|code-block|syntax|javascript|702788|entityMap|0|LINK|mutability|MUTABLE|url|https://api.jquery.com/data/#data-obj^0|1O|5|2M|C|38|7|2|Z|0|0|E|Y|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>Using the <a href="https://api.jquery.com/data/#data-obj" rel="nofollow">documented jquery .data(obj) syntax</a> allows you to store an object on the DOM element. Inspecting the element will not show the <code>data-</code> attribute because there is no key specified for the value of the object. However, data within the object can be referenced by key with <code>.data("foo")</code> or the entire object can be returned with <code>.data()</code>.</p>

<p>So assuming you set up a loop and <code>result[i] = { name: "image_name" }</code> :</p>

<pre><code>$('.delete')[i].data(results[i]); // =&gt; &lt;button class="delete"&gt;Delete&lt;/delete&gt;
$('.delete')[i].data('name'); // =&gt; "image_name"
$('.delete')[i].data(); // =&gt; { name: "image_name" }
</code></pre>


blocks|key|487125|text|由于某些原因，被接受的答案只有在页面上使用一次才有效，但在我的例子中，我试图保存页面上许多元素的数据，但不知何故，除了第一个元素之外，所有元素上的数据都丢失了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|487126|作为另一种选择，我最终将数据写出到dom，并在需要时解析回来。也许它的效率较低，但对我的目的很有效，因为我实际上是在原型化数据，而不是为了生产而编写这些。|487127|要保存我使用的数据：|487128|$('#myElement').attr('data-key',+JSON.stringify(jsonObject));|code-block|syntax|javascript|487129|然后读回数据与接受的答案相同，即：|487130|var+getBackMyJSON+=+$('#myElement').data('key');|487131|如果我要用Chrome的调试器检查元素，这样做也会使数据出现在dom中。|487132|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>For some reason, the accepted answer worked for me only if being used once on the page, but in my case I was trying to save data on many elements on the page and the data was somehow lost on all except the first element.</p>

<p>As an alternative, I ended up writing the data out to the dom and parsing it back in when needed. Perhaps it's less efficient, but worked well for my purpose because I'm really prototyping data and not writing this for production. </p>

<p>To save the data I used:</p>

<pre><code>$('#myElement').attr('data-key', JSON.stringify(jsonObject));
</code></pre>

<p>To then read the data back is the same as the accepted answer, namely:</p>

<pre><code>var getBackMyJSON = $('#myElement').data('key');
</code></pre>

<p>Doing it this way also made the data appear in the dom if I were to inspect the element with Chrome's debugger.</p>


blocks|key|702927|text|.data()在大多数情况下都能完美地工作。我唯一遇到问题的时候是JSON字符串本身有一个单引号。我找不到任何简单的方法来克服这个问题，所以求助于这种方法(我使用Coldfusion作为服务器语言)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|702928|++++<!DOCTYPE+html>
++++++++<html>
++++++++++++<head>
++++++++++++++++<title>
++++++++++++++++++++Special+Chars+in+Data+Attribute
++++++++++++++++</title>
++++++++++++++++<meta+http-equiv="X-UA-Compatible"+content="IE=edge">
++++++++++++++++<script+src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
++++++++++++++++<script>
++++++++++++++++++++$(function(){
++++++++++++++++++++++++var+o+=+$("##xxx");
++++++++++++++++++++++++/**
++++++++++++++++++++++++++++1.+get+the+data+attribute+as+a+string+using+attr()
++++++++++++++++++++++++++++2.+unescape
++++++++++++++++++++++++++++3.+convert+unescaped+string+back+to+object
++++++++++++++++++++++++++++4.+set+the+original+data+attribute+to+future+calls+get+it+as+JSON.
++++++++++++++++++++++++*/
++++++++++++++++++++++++o.data("xxx",jQuery.parseJSON(unescape(o.attr("data-xxx"))));
++++++++++++++++++++++++console.log(o.data("xxx"));+//+this+is+JSON+object.
++++++++++++++++++++});
++++++++++++++++</script>
++++++++++++++++<title>
++++++++++++++++++++Title+of+the+document
++++++++++++++++</title>
++++++++++++</head>
++++++++++++<body>
++++++++++++++++<cfset+str+=+{name:"o'reilly's+stuff",code:1}>

++++++++++++++++<div+id="xxx"+data-xxx='#urlencodedformat(serializejson(str))#'>
++++++++++++++++</div>
++++++++++++</body>
++++++++</html>|code-block|syntax|javascript|702929|entityMap^0|0|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p><code>.data()</code> works perfectly for most cases. The only time I had a problem was when the JSON string itself had a single quote. I could not find any easy way to get past this so resorted to this approach (am using Coldfusion as server language):</p>

<pre><code>    &lt;!DOCTYPE html&gt;
        &lt;html&gt;
            &lt;head&gt;
                &lt;title&gt;
                    Special Chars in Data Attribute
                &lt;/title&gt;
                &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
                &lt;script src="https://code.jquery.com/jquery-1.12.2.min.js"&gt;&lt;/script&gt;
                &lt;script&gt;
                    $(function(){
                        var o = $("##xxx");
                        /**
                            1. get the data attribute as a string using attr()
                            2. unescape
                            3. convert unescaped string back to object
                            4. set the original data attribute to future calls get it as JSON.
                        */
                        o.data("xxx",jQuery.parseJSON(unescape(o.attr("data-xxx"))));
                        console.log(o.data("xxx")); // this is JSON object.
                    });
                &lt;/script&gt;
                &lt;title&gt;
                    Title of the document
                &lt;/title&gt;
            &lt;/head&gt;
            &lt;body&gt;
                &lt;cfset str = {name:"o'reilly's stuff",code:1}&gt;
&lt;!-- urlencode is a CF function to UTF8 the string, serializeJSON converts object to strin --&gt;
                &lt;div id="xxx" data-xxx='#urlencodedformat(serializejson(str))#'&gt;
                &lt;/div&gt;
            &lt;/body&gt;
        &lt;/html&gt;
</code></pre>


blocks|key|702991|text|根据记录，我发现以下代码可以工作。它使您能够从data标记中检索数组，推入一个新元素，并以正确的JSON格式将其存储回data标记中。因此，如果需要，可以再次使用相同的代码向数组添加更多元素。我发现$('#my-data-div').attr('data-namesarray',+names_string);可以正确地存储数组，但是$('#my-data-div').data('namesarray',+names_string);不能工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|702992|<div+id="my-data-div"+data-namesarray='[]'></div>

var+names_array+=+$('#my-data-div').data('namesarray');
names_array.push("Baz+Smith");
var+names_string+=+JSON.stringify(names_array);
$('#my-data-div').attr('data-namesarray',+names_string);|code-block|syntax|javascript|702993|entityMap^0|2R|1K|4N|1F|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>For the record, I found the following code works. It enables you to retrieve the array from the data tag, push a new element on, and store it back in the data tag in the correct JSON format. The same code can therefore be used again to add further elements to the array if desired. I found that <code>$('#my-data-div').attr('data-namesarray', names_string);</code> correctly stores the array, but <code>$('#my-data-div').data('namesarray', names_string);</code> doesn't work.</p>

<pre><code>&lt;div id="my-data-div" data-namesarray='[]'&gt;&lt;/div&gt;

var names_array = $('#my-data-div').data('namesarray');
names_array.push("Baz Smith");
var names_string = JSON.stringify(names_array);
$('#my-data-div').attr('data-namesarray', names_string);
</code></pre>


blocks|key|703009|text|!DOCTYPE+html>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|703010|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$("#btn1").click(function()
{
person+=+new+Object();
person.name+=+"vishal";
person.age+=20;
++++$("div").data(person);
});
++$("#btn2").click(function()
{
++++alert($("div").data("name"));
});|703011|})；|unstyled|703012|</script>
<body>
<button+id="btn1">Attach+data+to+div+element</button><br>
<button+id="btn2">Get+data+attached+to+div+element</button>
<div></div>
</body>


</html>

Anser:-Attach+data+to+selected+elements+using+an+object+with+name/value+pairs.
GET+value+using+object+propetis+like+name,age+etc...|703013|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|6|7|N|8|@]|9|@]|A|$B|C]]|$1|F|3|G|5|H|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$B|C]]|$1|K|3|-4|5|H|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>!DOCTYPE html&gt;
</code></pre>

<p>
</p>

<pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
$("#btn1").click(function()
{
person = new Object();
person.name = "vishal";
person.age =20;
    $("div").data(person);
});
  $("#btn2").click(function()
{
    alert($("div").data("name"));
});
</code></pre>

<p>});</p>

<pre><code>&lt;/script&gt;
&lt;body&gt;
&lt;button id="btn1"&gt;Attach data to div element&lt;/button&gt;&lt;br&gt;
&lt;button id="btn2"&gt;Get data attached to div element&lt;/button&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/body&gt;


&lt;/html&gt;

Anser:-Attach data to selected elements using an object with name/value pairs.
GET value using object propetis like name,age etc...
</code></pre>


blocks|key|703042|text|这段代码对我来说运行得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|703043|用btoa编码数据|703044|let+data_str+=+btoa(JSON.stringify(jsonData));
$("#target_id").attr('data-json',+data_str);|code-block|syntax|javascript|703045|然后用atob解码|703046|let+tourData+=+$(this).data("json");
tourData+=+atob(tourData);|703047|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This code is working fine for me. </p>

<p>Encode data with btoa</p>

<pre><code>let data_str = btoa(JSON.stringify(jsonData));
$("#target_id").attr('data-json', data_str);
</code></pre>

<p>And then decode it with atob</p>

<pre><code>let tourData = $(this).data("json");
tourData = atob(tourData);
</code></pre>


blocks|key|487366|text|我在https://oblik.dev/utilities/config/中发现了一种更好的方法，基本上他们所做的就是有一个没有双引号的从-到json类对象的解析器：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|487367|import+{+Parser+}+from+'oblik/utils/config'

let+parser+=+new+Parser()
let+result+=+parser.parse('foo:+bar,+!baz')
console.log(result)+//+{+foo:+"bar",+baz:+false+}|code-block|syntax|javascript|487368|更多示例：|487369|<div+ob-foo="text:+Hello,+num:+42">My+Foo+component</div>|487370|我希望看到像这样的格式标准化|487371|entityMap|0|LINK|mutability|MUTABLE|url|https://oblik.dev/utilities/config/^0|2|Z|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>I found a better way in <a href="https://oblik.dev/utilities/config/" rel="nofollow noreferrer">https://oblik.dev/utilities/config/</a>
Basically what they do is have a parser from-to json-like objects without double quotes:</p>
<pre><code>import { Parser } from 'oblik/utils/config'

let parser = new Parser()
let result = parser.parse('foo: bar, !baz')
console.log(result) // { foo: &quot;bar&quot;, baz: false }
</code></pre>
<p>More examples:</p>
<pre><code>&lt;div ob-foo=&quot;text: Hello, num: 42&quot;&gt;My Foo component&lt;/div&gt;
</code></pre>
<p>I would like to see something like this format standartized</p>


<p>I am storing data using the <code>data-</code> approach in a HTML tag like so:</p>

<pre><code>&lt;td&gt;&lt;"button class='delete' data-imagename='"+results[i].name+"'&gt;Delete"&lt;/button&gt;&lt;/td&gt;
</code></pre>

<p>I am then retrieving the data in a callback like this:</p>

<pre><code>$(this).data('imagename');
</code></pre>

<p>That works fine. What I am stuck on is trying to save the object instead of just one of the properties of it. I tried to do this:</p>

<pre><code>&lt;td&gt;&lt;button class='delete' data-image='"+results[i]+"'&gt;Delete&lt;/button&gt;&lt;/td&gt;
</code></pre>

<p>Then I tried to access the name property like this:</p>

<pre><code>var imageObj = $(this).data('image');
console.log('Image name: '+imageObj.name);
</code></pre>

<p>The log tells me <code>undefined</code>. So it seems like I can store simple strings in the <code>data-</code> attributes but I can't store JSON objects...</p>

<p>I've also tried to use this kid of syntax with no luck:</p>

<pre><code>&lt;div data-foobar='{"foo":"bar"}'&gt;&lt;/div&gt;
</code></pre>

<p>Any idea on how to store an actual object in the HTML tag using the <code>data-</code> approach?</p>


Store JSON object in data attribute in HTML jQuery

服务器

调试器

jQuery

JSON

我使用data-方法在HTML标签中存储数据，如下所示：<td><"button class='delete' data-imagename='"+results[i].name+"'>Delete"</button></td>然后，我在一个回调中检索数据，如下所示：$(this).data('imagename');...

问将JSON对象存储在HTML jQuery数据属性中
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将JSON对象存储在HTML jQuery数据属性中EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将JSON对象存储在HTML jQuery数据属性中
EN