如何基于表单id字段创建指定结构数组？现有代码未达预期

现有HTML结构 #

<input type="text" name="qty" placeholder="regular-price" class="ticket-quantity" id="tickets" value="1">
<input type="text" name="qty" placeholder="vip-price" class="ticket-quantity" id="tickets" value="1">
<input type="text" name="qty" placeholder="viip-price" class="ticket-quantity" id="tickets" value="1">

原代码问题 #

你写的代码无法得到预期结果，核心问题有三个：

1. ID重复无效：HTML规范要求ID唯一，$("#tickets")只会选中第一个输入框，循环只执行一次
2. 逻辑冗余：$(this).parent().find('input.ticket-quantity').val()完全多余，直接用$(this).val()就能获取当前输入框的值
3. 字段映射错误：没有把placeholder的xxx-price转换为目标的xxx-ticket，且对象键名写成了tickets，不符合目标结构的ticket

修正后的代码（jQuery版本） #

var tickets = [];
// 用class选择器选中所有目标输入框，避开ID重复问题
$(".ticket-quantity").each(function() {
    // 把placeholder的后缀从-price替换成-ticket，得到票种名称
    const ticketType = $(this).attr("placeholder").replace("-price", "-ticket");
    // 获取当前输入框的数值，转为字符串（匹配示例格式）
    const ticketValue = $(this).val().toString();
    // 按目标结构推入数组
    tickets.push({
        ticket: ticketType,
        value: ticketValue
    });
});
ajax_data.tickets = tickets;

原生JavaScript版本（无需jQuery） #

如果不想依赖jQuery，也可以用原生JS实现：

const tickets = [];
// 获取所有带ticket-quantity类的输入框
const ticketInputs = document.querySelectorAll(".ticket-quantity");
ticketInputs.forEach(input => {
    const ticketType = input.placeholder.replace("-price", "-ticket");
    const ticketValue = input.value.toString();
    tickets.push({
        ticket: ticketType,
        value: ticketValue
    });
});
ajax_data.tickets = tickets;

说明 #

• 修正了ID重复的问题：用class选择器替代ID选择器，确保能选中所有输入框
• 实现了票种名称的转换：通过字符串替换把xxx-price转为xxx-ticket
• 严格匹配目标结构：对象键名使用ticket和value，数组元素顺序和输入框顺序一致

内容的提问来源于stack exchange，提问作者Kudown lod