JavaScript/jQuery动态获取多元素数据并构建数组教程

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tbody class="table-border" id="My_OrderCart_tbody">
  <tr>
    <div class="row-fluid gx-2 px-2">
      <dl data-place_id="dl7557">
        <dd class="px-1">J. De Telmont Grand Reserve Brut NV Champagne (15Litre)</dd>
      </dl>
    </div>
    <div class="px-2">
      <input class="input form-control" type="number" id="Quan7557" value="1" data-id="7557">
    </div>
    <div class="mx-auto">
      <span>$</span>
      <input type="text" class="input form-control" id="Price7557" data-id="7557" value="10500">
    </div>
    <div class="row max-auto px-3">
      <input type="button" class="btn btn-sm Remove" id="7557" value="Remove">
    </div>
  </tr>
  <tr>
    <span>SubTotoal :</span><span>$</span>
    <input type="text" class="input form-control" id="Sub_7557" value="10500.00" disabled="">
  </tr>
  <!-- 更多商品项... -->
</tbody>

<button id="saveBtn">保存订单</button>

<script>
$(document).on('click', '#saveBtn, #view-table', function() {
  $('#My_OrderCart_tbody tbody tr').each(function() {
    // 尝试在循环内部声明变量
    var data_id = $(this).find("dl[data-place_id^=dl]").data("place_id");
  });
  // 在循环外部访问 data_id
  console.log(data_id); // 预期会报错：Uncaught ReferenceError: data_id is not defined
});
</script>

$(document).on('click', '#saveBtn, #view-table', function() {
    // 1. 在循环外部声明一个数组来存储所有ID
    let productIds = [];

    $('#My_OrderCart_tbody tr').each(function() {
        // 2. 在循环内部获取每个元素的 data-place_id
        // 注意：此处选择器为 dl[data-place_id] 而非 dl[id^=dl]，因为原始HTML中dl没有id属性，而是data-place_id属性。
        let currentId = $(this).find("dl[data-place_id]").data("place_id");

        // 确保获取到了有效ID再添加
        if (currentId) {
            productIds.push(currentId);
        }
    });

    // 3. 在循环外部访问并处理包含所有ID的数组
    console.log("所有产品ID:", productIds); // 例如：["dl7557", "dl7556"]
    console.log("第一个产品ID:", productIds[0]); // 例如："dl7557"

    // 此时，productIds 数组包含了所有购物车商品的 data-place_id
    // 你可以将这个数组通过 AJAX 发送到后端
    // sendDataViaAjax(productIds);
});

$(document).on('click', '#saveBtn, #view-table', function() {
    let cartItemsData = [];

    $('#My_OrderCart_tbody tr').each(function() {
        let $row = $(this); // 缓存当前行 jQuery 对象
        let productId = $row.find("dl[data-place_id]").data("place_id");

        // 根据 productId 构造选择器来获取对应的数量和价格
        // 注意：原始HTML中，数量和价格的data-id与dl的data-place_id可能不完全匹配，
        // 需要根据实际情况调整选择器。这里假设productId的数字部分与data-id的数字部分一致。
        let numericId = productId ? productId.replace('dl', '') : null;

        let quantity = numericId ? $row.find(`input[data-id="${numericId}"][type="number"]`).val() : null;
        let price = numericId ? $row.find(`input[data-id="${numericId}"][type="text"]`).val() : null;

        if (productId) {
            let itemData = {
                id: productId,
                quantity: quantity,
                price: price,
                // 也可以存储对当前行的引用，如果后续需要对DOM进行操作
                element: $row
            };
            cartItemsData.push(itemData);
        }
    });

    console.log("所有购物车商品数据:", cartItemsData);
    // 访问第一个商品的ID
    if (cartItemsData.length > 0) {
        console.log("第一个商品的ID:", cartItemsData[0].id);
        console.log("第一个商品的数量:", cartItemsData[0].quantity);
        // 如果存储了元素引用，可以继续操作DOM
        // cartItemsData[0].element.addClass('highlight');
    }

    // 此时，cartItemsData 数组包含了每个商品的详细信息
    // 你可以将这个数组通过 AJAX 发送到后端
    // sendDataViaAjax(cartItemsData);
});

function sendCartDataToServer(data) {
    $.ajax({
        url: "action.php", // 后端处理数据的URL
        method: "POST",
        dataType: "json", // 期望服务器返回的数据类型
        data: {
            // 将收集到的数据作为参数发送
            cart_items: JSON.stringify(data) // 将JavaScript对象数组转换为JSON字符串
        },
        success: function(response) {
            if (response.status === "success") {
                alert("购物车数据已成功保存！");
                // 根据后端返回的数据更新UI，例如：
                // $('#order_table').html(response.order_table);
                // $('.badge').text(response.cart_item);
            } else {
                alert("保存失败：" + response.message);
            }
        },
        error: function(xhr, status, error) {
            console.error("AJAX请求出错:", status, error);
            alert("网络或服务器错误，请稍后再试。");
        }
    });
}

// 在点击事件处理函数中调用此函数
$(document).on('click', '#saveBtn, #view-table', function() {
    let cartItemsData = [];
    // ... (如上文所示，收集 cartItemsData) ...

    if (cartItemsData.length > 0) {
        sendCartDataToServer(cartItemsData);
    } else {
        alert("购物车为空，无需保存。");
    }
});