如何用jQuery实现购物车店铺选择时自动分配剩余订购数量

Hey there! Let's build this functionality step by step. I'll provide a complete, clean implementation that matches your requirement—where users can assign 3 items across shops, and if one shop is assigned 1 item, clicking another shop's input will auto-fill the remaining 2.

Step 1: HTML Structure #

First, let's set up the basic markup for the cart item and shop selection area. We'll use number inputs to let users adjust quantities, and track each shop's assigned count:

<div class="cart-item">
  <h3>钱包 (总数量: <span class="total-items">3</span>)</h3>
  <div class="shop-fulfillment">
    <div class="shop">
      <label>店铺A</label>
      <input type="number" class="quantity-input" min="0" max="3" value="0" data-shop-id="a">
    </div>
    <div class="shop">
      <label>店铺B</label>
      <input type="number" class="quantity-input" min="0" max="3" value="0" data-shop-id="b">
    </div>
    <div class="shop">
      <label>店铺C</label>
      <input type="number" class="quantity-input" min="0" max="3" value="0" data-shop-id="c">
    </div>
  </div>
</div>

Step 2: jQuery Implementation #

Now let's write the jQuery logic to handle quantity validation, total tracking, and auto-fill behavior:

$(document).ready(function() {
  // 总商品数量（这里固定为3，可根据实际情况动态获取）
  const totalItems = parseInt($('.total-items').text());
  let assignedTotal = 0;

  // 初始化：记录每个输入框的初始值，并计算已分配总数
  $('.quantity-input').each(function() {
    const initialVal = parseInt($(this).val()) || 0;
    $(this).data('prevVal', initialVal);
    assignedTotal += initialVal;
  });

  // 监听数量输入框的变化事件：校验合法性 + 更新总数量
  $('.quantity-input').on('change', function() {
    const prevVal = $(this).data('prevVal');
    let currentVal = parseInt($(this).val());

    // 1. 校验输入值：不能是负数、非数字，也不能超过剩余可分配数量
    if (isNaN(currentVal) || currentVal < 0) {
      currentVal = 0;
    }
    const remaining = totalItems - (assignedTotal - prevVal);
    if (currentVal > remaining) {
      currentVal = remaining;
    }

    // 更新输入框值和历史记录
    $(this).val(currentVal);
    $(this).data('prevVal', currentVal);

    // 更新已分配总数量
    assignedTotal = (assignedTotal - prevVal) + currentVal;
  });

  // 监听输入框获得焦点事件：自动填充剩余数量（符合条件时）
  $('.quantity-input').on('focus', function() {
    const remaining = totalItems - assignedTotal;
    // 当已分配1件，且当前输入框未分配任何数量时，自动填充剩余值
    if (assignedTotal === 1 && parseInt($(this).val()) === 0) {
      $(this).val(remaining);
      // 触发change事件，更新总数量和其他状态
      $(this).trigger('change');
    }
  });
});

Key Features Explained #

• Input Validation: Ensures users can't enter invalid numbers (negative, non-numeric) or assign more items than available.
• Total Tracking: Keeps tabs on how many items have been assigned across all shops to avoid exceeding the total of 3.
• Auto-Fill Behavior: When exactly 1 item is already assigned, clicking any unassigned shop's input will automatically fill in the remaining 2 items.
• Dynamic Adjustment: If users modify a quantity later, the total updates in real-time, and the auto-fill logic adapts accordingly.

Customization Tips #

• If your total item count is dynamic (e.g., pulled from a database), just replace the totalItems initialization with your dynamic value.
• You can swap the number inputs with buttons (like "分配剩余数量") if you prefer a click-based interface instead of text inputs.
• Add visual feedback (e.g., highlighting the shop with auto-filled quantity) using CSS to enhance user experience.

内容的提问来源于stack exchange，提问作者Shivani Singh