javascript - 如何使用jquery获取对象中元素的数据属性？

Question

我有一个像这样编译的按钮循环

<button class="add-line btn btn-info btn-sm" id="cat1" data-cat="[1,2,3,4,5,6,7]">cat1</button>
<button class="add-line btn btn-info btn-sm" id="cat2" data-cat="[8,9]">cat2</button>
<button class="add-line btn btn-info btn-sm" id="cat3" data-cat="[10,11]">cat3</button>

在 Jquery 中，我得到的数据是这样的

let cat1 = $('#cat1').data('cat');
let cat2 = $('#cat2').data('cat');
let cat3 = $('#cat3').data('cat');

但这是硬编码，因为我知道有这 3 个 ID。我想创建一个对象并动态地制作这个东西。如何做到这一点？

Answer 1

创建一个对象，然后使用 .each() 遍历元素，并在循环中将 data-cat 的值添加到对象。

var cats = {};
$("#cat1, #cat2, #cat3").each(function(){
  cats[this.id] = $(this).data("cat");
});
console.log(cats);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add-line btn btn-info btn-sm" id="cat1" data-cat="[1,2,3,4,5,6,7]">cat1</button>
<button class="add-line btn btn-info btn-sm" id="cat2" data-cat="[8,9]">cat2</button>
<button class="add-line btn btn-info btn-sm" id="cat3" data-cat="[10,11]">cat3</button>