将 HTML 数据属性设置为整数数组答案

【问题标题】：set HTML data attribute as an integer array将 HTML 数据属性设置为整数数组
【发布时间】：2021-08-21 22:09:51
【问题描述】：

HTML代码如下：

<div class="item_group"  data-item_ids='<%=item_ids%>'></div>

在渲染视图中如下所示：

<div class="item_group" data-item_ids="[22, 33, 19, 21]"</div>

为什么这个整数数组出现在双引号中？所以，如果我们取这个数据属性的值，它会以字符串的形式返回值：

  item[group_id] = ($(this).attr("data-item_ids"))

 "[22, 33, 19, 21]"

如何将值作为整数数组检索，以便传递控制器并作为整数数组进入操作？

【问题讨论】：

标签： javascript html jquery ruby-on-rails ajax

【解决方案1】：

为什么这个整数数组出现在双引号内？

因为这是 HTML 渲染器使用的引号类型。使用双引号 (") 来分隔 HTML 中的属性值是标准做法，而不是单引号 (')。

它以字符串形式返回值。如何将值检索为整数数组？

它返回一个字符串，因为您使用的是attr()。如果您想将值作为数组使用，您可以在该字符串上调用 JSON.parse()：

let attr = $('.item_group').attr('data-item_ids');
let arr = JSON.parse(attr);

console.log(typeof attr, attr);
console.log(typeof arr, arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item_group" data-item_ids="[22, 33, 19, 21]"></div>

还请注意，您可以通过使用 jQuery 的 data() 方法来避免手动解析字符串的需要。这将自动确定data 属性中值的类型并为您执行类型强制：

let ids = $('.item_group').data('item_ids');

console.log(typeof ids, ids);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item_group" data-item_ids="[22, 33, 19, 21]"></div>

【讨论】：