提交时未通过自定义标签收集数据

Question

我有这种 JS，女巫收集数据并推动改变。

var dataArray = [];

$(function(){
    $(document).on('change', 'input', function(){
    var hid0 = $(this).data("hidden_val0");
    var hid1 = $(this).data("hidden_val1");
    var hid2 = $(this).data("hidden_val2");
    dataArray.push([hid0, hid1, hid2])
  });
});

   $('.something_here').bind('click', function (event) {
    event.preventDefault();
    $.post('/do/it',
        {
            send_array: dataArray,
        },
        function (response) {
           location.reload();
        }
    );

问题是它看不到目标，我认为？可能是我不应该使用$(this)，因为他根本没有得到正确的值。

这是我正在使用的 HTML：

  <input autocomplete="off" id="add_109_01000340001001001_cad" name="add_109_01000340001001001[cad]" hidden_val0="hidden_val0" type="hidden" value="01000340001001001">
  <input autocomplete="off" hidden_val1="hidden_val1" id="add_109_01000340001001001_id" name="add_109_01000340001001001[id]" type="hidden" value="112000666">
  <input autocomplete="off" autocomplete_key="add_109" hidden_val2="hidden_val2" id="add_109_01000340001001001" name="add_109_01000340001001001" onkeyup="fillFlatNumber(this)" size="3" style="height: 10px" type="text" value="1" class="ac_input">

现在我得到了这个，而不是里面的值：

[undefined, undefined, undefined]

如果有人这么好心并且可以帮助我。我将感激不尽。

Answer 1

不要使用不同的数据属性，而是使用一个（例如data-hidden），并确保为它们添加data-的前缀。完成此操作后，您可以使用以下命令遍历所有具有此数据隐藏属性的元素：

$("[data-hidden]").each(function() { // loop all tags with `data-hidden`
  hidden_values.push($(this).data("hidden"));
});

这里$("[data-hidden]")选择所有具有data-hidden属性的元素，.each()允许我们循环遍历这些元素，其中$(this)指的是我们正在迭代的当前元素。

见下例：

var dataArray = [];

$(function() {
  $('input').change(function() {
    var hidden_values = [];
    $("[data-hidden]").each(function() { // loop through all hidden values
      hidden_values.push($(this).data("hidden"));
    });
  
    dataArray.push(hidden_values);
    console.log(dataArray);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<input autocomplete="off" id="add_109_01000340001001001_cad" name="add_109_01000340001001001[cad]" data-hidden="hidden_val0" type="hidden" value="01000340001001001">
<input autocomplete="off" data-hidden="hidden_val1" id="add_109_01000340001001001_id" name="add_109_01000340001001001[id]" type="hidden" value="112000666">
<input autocomplete="off" autocomplete_key="add_109" data-hidden="hidden_val2" id="add_109_01000340001001001" name="add_109_01000340001001001" size="3" style="height: 10px" type="text" value="1" class="ac_input">

Answer 2

您的代码存在多个问题，我会尝试一一列出

1. 数据属性应以数据为前缀。所以访问喜欢 $(this).data("hidden_val") 你的 html 应该是 data-hidden_val="hidden_val"
2. 您正在向所有输入字段添加输入更改事件，所以当您 编辑第一个输入，你不能查询第二个和第三个输入的 值，因为它们将为空。如果你试图获得所有的价值 三个元素，您的数组将只有一个正确值和两个 空值。
3. 由于您将数据附加到数组中，因此任何输入的每次更改都会添加一组新的重复值。
4. 您为每个输入使用了不一致的数据属性，例如hidden_val0、hidden_val1 等。而只需使用data-hidden_val

因此，与其在输入更改时读取数据，不如在将其发送到服务器之前读取它