Jquery data() 存储多个值

Question

我有一个带有几个多选列表的简单应用程序。我需要存储这些列表中的选择，以便以后在计算中使用它们。由于没有存储大量数据，我想我会使用 jquery 的 data()。我多次使用它来存储单个值，但无法获得正确的语法来存储多个选择。我可以使用类似下面的方法来保存这些值，还是会在每个循环中删除以前的值？

function storeCheckBoxes($this) {
//save a list of checkbox values
   var key;
   $("input:checkbox").each(function () {

       if ($this.is(":checked")) {
           key = $this.attr("id");
           value = $this.val();
           $("#services").data(key, value);

       }
   });
}

如何将多个项目存储到单个 dom 元素？

谢谢

Answer 1

您的代码存在的问题是您在每次迭代中都使用了相同的 key 和 value。

我认为您混淆了 $this 和 $(this)。 $this 指的是您传递给 storeCheckBoxes 函数的元素，因此您使用 $this.val() 一遍又一遍地设置相同的数据属性。

您可能想从复选框本身获取数据，因此您需要在 .each 循环中使用 $(this)。 $(this) 在 .each 循环中指的是复选框，而不是传递给 storeCheckBoxes() 的原始元素。

另外，当您使用复选框的 ID 作为 key 时，您需要确保每个复选框也有唯一的 ID。

function storeCheckBoxes($this) {
// save a list of checkbox values
   $("input:checkbox").each(function () {
       if ( $(this).is(":checked") ) {
           var key = $(this).attr("id");
           var value = $(this).val();
           $("#services").data(key, value);

       }
   });
}

Answer 2

我从你的问题中得到的是你不想将 key 和 value 存储在不同的 data-attributes.

你在做什么

$("#services").data(key, value);

假设：-

key='a' and value= 12 and services is a div

它将添加一个值为 12 的 data-attribute，可以使用键 'a' 检索，如下所示。

$("#services").data('a'); will give you 12

如果要插入多个 data-attributes，则必须为每个项目设置一次 data 属性。

$("#services").data('key', key);
$("#services").data('value', value);

DEMO

Jquery data() 存储多个值

Jquery data() storing multiple values

javascript

jquery