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

Question

我想使用一个数组来使用数据属性传递。在我的 HTML-tag 中我有这个属性：

data-toshow='["tblp"]'

我可以在使用

时通过 jQuery 访问和使用它

$().data('toshow')

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

谁能给我解释一下？并告诉我如何在不使用 jQuery?

的情况下做同样的事情

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

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 属性，则此属性可能为空，但如果有任何数据属性，数据集属性是一个包含元素上声明的所有数据值的数组。

给定一个像 <div data-name='Usher' data-max-number='5'> 这样的 html 有两种方法可以使用 javascript、

获取此数据属性

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

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

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

Getting array out of data attribute without jQuery

html

javascript

arrays

jquery

custom-data-attribute