Question

我想使用数据属性来传递数组。在我的HTML标签中，我具有以下属性：

data-toshow='["tblp"]'

使用

时，我可以在jQuery中访问和使用它

$().data('toshow')

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

有人可以向我解释吗？并给我答案，不使用jQuery怎么做？

Answer 1

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

// jQuery approach
let jqtest = $('div').data('toshow');
console.log(jqtest);

// Plain JavaScript approach
let 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>

Answer 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);

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

Answer 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

Answer 4

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

使用<div data-name='Usher' data-max-number='5'>这样的html，您可以通过两种方式使用javascript获取此数据属性，

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

第二种方法是通过元素的数据集属性。您将使用element.dataset.name获得name属性或element.dataset.maxNumber 注意：最大数量如何变为最大数量。这就是使用camelCase访问连字符分隔的数据集属性的方式

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

4 个答案: