将参数从 <div> 的数据选项属性传递并解析到 JavaScript 函数

Question

我有一个 <div>，在 data-options 属性中有一些选项：

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

此属性包含每个 <div> 和 .slider class.

所需的参数

我将这些参数保存到 options 变量中：

var options = value.dataset.options;

然后我需要将这些选项传递给每个 .slider 元素的函数 tns：

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

如果稍微更改该属性值的语法，添加大括号和转义引号 (")，则可以使用 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">

Answer 2

请考虑单独传递数据选项。

为此：

 <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')
 //...

将参数从 <div> 的数据选项属性传递并解析到 JavaScript 函数

Pass and parse arguments from a <div>'s data-options attribute to a JavaScript function

javascript

html

attributes

custom-data-attribute