添加数据属性值作为内联-css "width" 值

Question

我有这样的代码：

<span class="bar" data-percent="25,6"></span>
<span class="bar" data-percent="40,6"></span>
<span class="bar" data-percent="10,6"></span>
<span class="bar" data-percent="60"></span>

我想获取数据百分比值，将逗号更改为点并将此值添加为跨度的宽度。

像这样：

<span class="bar" data-percent="25,6" style="width: 25.6%"></span>

$('span[class="bar"]').each(function(index, item) {
  var a = $(item).data('percent');
  a = a.replace(/,/g, '.') + '%';
  $(item).width(a);
});

.bar {
  height: 40px;
  background: red;
  display: block;
  margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="bar" data-percent="25,6">First Span</span>
<span class="bar" data-percent="40,6">Second Span</span>
<span class="bar" data-percent="10,6">Third Span</span>
<span class="bar" data-percent="60">Fourth Span</span>

我写了一些jquery但是它不起作用，如果数据中没有逗号，jquery就不起作用。

https://jsfiddle.net/mod7910u/

感谢 Josh，这是最后一个有效的动画版本： https://jsfiddle.net/mg4p5bmc/1/

Answer 1

问题是由于属性 data-percent="60" 值被视为数字。而其他属性值由于存在逗号而被视为字符串。由于值 60 是一个数字，因此 .replace() 方法会引发错误。

要解决此问题，只需在 .replace() 之前调用 .toString() 方法以确保该值为字符串。

Updated Example

var a = $(item).data('percent');
a = a.toString().replace(/,/g, '.') + '%';

您也可以使用 String() 构造函数将值转换为字符串：

var a = $(item).data('percent');
a = String(a).replace(/,/g, '.') + '%';

添加数据属性值作为内联-css "width" 值

Add data attiribute values as an inline-css "width" value

html

javascript

css

jquery

custom-data-attribute