Получение массива из атрибута данных без jQuery

Question

Я хочу работать с массивом, чтобы пройти через использование data-attribute.В моем HTML-теге есть такой атрибут:

data-toshow='["tblp"]'

Я могу получить к нему доступ и использовать его с jQuery при использовании

$().data('toshow')

Но при использовании dataset.toshow я не получаютот же результат.Я на самом деле не получаю массив.

Может кто-нибудь объяснить это мне?И дайте мне ответ, как сделать то же самое без использования jQuery?

Answer 1

Каждый HTMLElement имеет свойство dataset, это свойство может быть нулевым, если в элементе нет атрибута data, но если есть какой-либо атрибут данных, свойство набора данных представляет собой массив, содержащий все значения данных, объявленные вэлемент.

Имея html вроде <div data-name='Usher' data-max-number='5'> Есть два способа получить этот атрибут данных с помощью javascript,

Один из способов - вызвать element.getAttribute('data-name') or element.getAttribute('data-max-number') этого элемента.

Второй способ - через свойство набора данных элемента.который вы будете использовать element.dataset.name для получения атрибута имени или element.dataset.maxNumber ПРИМЕЧАНИЕ: Как max-number становится maxNumber .Вот так вы получаете доступ к атрибуту набора данных, разделенному дефисом, используя camelCase

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 в действии

Answer 4

Метод 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>