将参数从 <div> 的 data-options 属性传递并解析到 JavaScript 函数答案

【问题标题】：Pass and parse arguments from a <div>'s data-options attribute to a JavaScript function将参数从 <div> 的 data-options 属性传递并解析到 JavaScript 函数
【发布时间】：2018-12-04 04:41:47
【问题描述】：

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

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

此属性包含我需要的每个 <div> 和 .slider 类的参数。

我将这些参数保存到 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 ***********/
  });
});

我怎样才能做到这一点？

【问题讨论】：

标签： javascript html attributes custom-data-attribute

【解决方案1】：

如果您稍微更改该属性值的语法，添加花括号和转义引号 (&quot;)，则可以使用 &quot;：

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

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

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

另一种看起来更好的选择是使用单引号 ' 和 eval()：

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

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

&lt;div id="slider" data-options="{ 'container': 'value', 'speed': 1000, 'edgePadding': 45, 'lazyload': true }"&gt;

或者只是自己解析属性的值：

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

&lt;div id="slider" data-options="container: value, speed: 1000, edgePadding: 45, lazyload: true"&gt;

更详细的解析逻辑：

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

&lt;div id="slider" data-options="container: value, speed: 1000, edgePadding: 45, lazyload: true"&gt;

【讨论】：

@ysanmiguel 我已经用 2 个不同的示例更新了答案。一个使用JSON.parse()，如果您可以稍微更改您在该data- 属性上设置的值的语法，另一个则自己解析它，如果您不能更改该语法。
很好，非常感谢。我使用数据选项中的 JSON.parse 和 JSON 语法解决了这个问题。非常感谢！！！

【解决方案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')
 //...

【讨论】：