Передавать и анализировать аргументы из атрибута data-options <div>в функцию JavaScript

Question

У меня есть <div> с некоторыми опциями в атрибуте data-options:

<div class="slider" data-options="container: value, speed: 1000, edgePadding: 45, lazyload: true">

Этот атрибут содержит аргументы, которые мне нужны для каждого <div> с классом .slider.

Я сохраняю эти аргументы в options переменную с помощью:

var options = value.dataset.options;

Затем мне нужно передать эти опции в функцию tns для каждого .slider элемента:

var forEach = function (array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]);
  }
};

var sliders = document.querySelectorAll('.slider');

forEach(sliders, function (index, value) {
  var options = value.dataset.options;

  let slider = tns({
      /************ PARAMETERS GO HERE ***********/
  });
});

Как мне этого добиться?

Answer 1

Пожалуйста, передайте параметры данных отдельно.

Для этого:

 <div class="slider" data-options="container: value, speed: 1000, edgePadding: 45, lazyload: true">

лучше

 <div class="slider" data-container="value" data-speed="1000" data-edgePadding"45" data-lazyload"true">

А затем перехватите каждый элемент данных:

В простом JS ...

 document.querySelector(".slider").getAttribute("data-container");
 document.querySelector(".slider").getAttribute("data-speed");
 //...

В jQuery ...

 $('.slider').data('container')
 $('.slider').data('speed')
 $('.slider').data('container')
 //...

Answer 2

Вы можете использовать JSON.parse, если немного измените синтаксис значения этого атрибута, добавив фигурные скобки и экранированные кавычки ("):

const slider = document.getElementById('slider');

console.log(JSON.parse(`${ slider.dataset.options }`));

<div id="slider" data-options="{ &quot;container&quot;: &quot;value&quot;, &quot;speed&quot;: 1000, &quot;edgePadding&quot;: 45, &quot;lazyload&quot;: true }">

Другой альтернативой, которая выглядит лучше, будет использование одинарных кавычек ' и eval():

const slider = document.getElementById('slider');

console.log(eval(`(${ slider.dataset.options })`));

<div id="slider" data-options="{ 'container': 'value', 'speed': 1000, 'edgePadding': 45, 'lazyload': true }">

Или просто проанализируйте значение атрибута самостоятельно:

const slider = document.getElementById('slider');
const options = {};

slider.dataset.options.split(',').forEach((pair) => {
  const [key, value] = pair.split(':');
  
  options[key.trim()] = value.trim();
});

console.log(options);

<div id="slider" data-options="container: value, speed: 1000, edgePadding: 45, lazyload: true">

Более сложная логика синтаксического анализа:

const slider = document.getElementById('slider');
const options = {};

slider.dataset.options.split(',').forEach((pair) => {
  const [key, value] = pair.split(':');
  
  let parsedValue = value.trim();
  
  if (!isNaN(parsedValue)) {
    options[key.trim()] = +parsedValue;
  } else if (parsedValue === 'true' || parsedValue === 'false') {
    options[key.trim()] = parsedValue === 'true';
  } else {
    options[key.trim()] = parsedValue;
  }
});

console.log(options);

<div id="slider" data-options="container: value, speed: 1000, edgePadding: 45, lazyload: true">