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

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-为它们添加前缀 of。完成此操作后，您可以使用以下命令遍历所有具有此数据隐藏属性的元素：

$("[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

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