代码之家 › 专栏 › 技术社区 › ysanmiguel

将参数从<div>的data options属性传递和解析到javascript函数

custom-data-attribute attributes html5 html javascript

0

ysanmiguel · 技术社区 · 8 年前

我有一个 <div> 有一些选择 data-options 属性:

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

此属性包含每个 <分区> 用一个 .slider 上课。

我把这些争论保存在 options 变量:

var options = value.dataset.options;

然后我需要把这些选项传递给一个函数 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 ***********/
  });
});

我怎样才能做到这一点?

2 回复 | 直到 8 年前

1

3

Danziger 8 年前

你可以用 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=“容器:值,速度:1000,edgePadding:45,lazyload:true”>

2

1

Ignacio Ramos 8 年前

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

为此:

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