动态地将值传递给数据对象

Posted 2023-03-16

【中文标题】动态地将值传递给数据对象

【英文标题】：Dynamically pass in values to the data object

【发布时间】：2021-06-25 19:13:34

【问题描述】：

目前，我获取一个 id 的值并将其传递到我的数据对象中以发送到服务器。

const field_value = $('#id_field').val();
const scores_value = $('#id_scores').val();
$.ajax(
    data: 'Fields':field_value, 'Scores': scores_value,
);

我想动态实现这一点，以防我添加更多表单，这样它就可以自动更新，而无需我更改任何代码。

我尝试使用 jquery 的 each 方法来访问该类。

$(".class").each(function() 
    const get_updated_value = $(this).val();
);

这会动态获取值，但我无法将返回的值传递给数据对象。

【问题讨论】：

get_updated_value 仅在 .each 调用的函数内部定义 - 您无法从该函数外部访问它。

【参考方案1】：

如果每个带有 '.class' 的元素都有自己的 id，你可以将这些 id 作为数据对象的键：

var updated_values = ;

$(".class").each(function() 
    updated_values[$(this).attr('id')] = $(this).val();
);

$.ajax(
    data: updated_values,
);

工作示例：

function update() 
    var updated_values = ;
  
    $(".input").each(function() 
        updated_values[$(this).attr('id')] = $(this).val();
    );
  
    console.log(updated_values);

input 
    display: block;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
    <input type="text" placeholder="My task" id="field" class="input">
    <input type="text" placeholder="My date" id="scores" class="input">
    <input type="text" placeholder="My time" id="something_new" class="input">
    <input type="button" value="Update" onclick=update() id="save">
</div>