在没有 jQuery 的情况下从数据属性中获取数组答案

【问题标题】：Getting array out of data attribute without jQuery在没有 jQuery 的情况下从数据属性中获取数组
【发布时间】：2019-05-07 05:49:00
【问题描述】：

我想使用一个数组来通过数据属性。在我的 HTML 标记中，我有这个属性：

data-toshow='["tblp"]'

我在使用时可以通过jQuery访问和使用它

$().data('toshow')

但是当使用dataset.toshow 时，我没有得到相同的结果。我实际上没有得到一个数组。

谁能给我解释一下？并告诉我如何在不使用 jQuery 的情况下做同样的事情？

【问题讨论】：

标签： javascript jquery arrays html custom-data-attribute

【解决方案1】：

jQuery 的.data() 方法自动尝试将自定义数据属性中的字符串转换为它看起来的任何类型（在本例中为数组）。 JavaScript 只是将其视为字符串，因此您需要解析字符串以获得与 jQuery 相同的数组输出。例如：

// jQuery approach
const jqtest = $('div').data('toshow');
console.log(jqtest);

// Plain JavaScript approach
const jstest = JSON.parse(document.querySelector('div').dataset.toshow);
console.log(jstest);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-toshow='["tblp"]'></div>

【讨论】：

【解决方案2】：

//Use dataset to get a string of all data-* props
const stringVal = document.querySelector('#divA').dataset['toshow'];

//Parse the value of "data-toshow" to get your array
const array = JSON.parse(stringVal);
console.log(array);

&lt;div id="divA" data-toshow='["tblp"]'&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

假设您的 HTML 类似于：

<div id="theThing" data-toshow='["tblp"]'></div>

或

<div id="theThing" data-toshow='["tblp","arrItem2","arrItem3"]'></div>

//jQuery
var container_jq = $("#theThing");
var container_jq_dataArr = decodeURIComponent(container_jq.data('toshow')).split(",");

//vanilla
var container_vanilla = document.getElementById("theThing");
var container_vanilla_dataArr = JSON.parse(decodeURIComponent(container_vanilla.dataset.toshow));

console.info({jQuery: container_jq_dataArr,vanilla: container_vanilla_dataArr});

jsfiddle in action

【讨论】：

【解决方案4】：

每个 HTMLElement 都有 dataset 属性，如果元素中没有 data 属性，则该属性可能为 null，但如果有任何数据属性，则 dataset 属性是一个包含在该元素上声明的所有数据值的数组元素。

给定一个像<div data-name='Usher' data-max-number='5'>这样的html，有两种方法可以使用javascript获取这个数据属性，

一种方法是调用该元素的element.getAttribute('data-name') or element.getAttribute('data-max-number')。

第二种方式是通过元素的dataset属性。您将使用element.dataset.name 来获取名称属性或element.dataset.maxNumber 注意：max-number 如何变成 maxNumber。这就是您使用 camelCase 访问连字符分隔的数据集属性的方式

【讨论】：