如何在jQuery Widget中获取当前可修改元素及提交购物车变更字段？

嘿，我来帮你搞定这个自定义jQuery Widget里获取并提交购物车数量变更的问题～

核心思路 #

我们需要在数量输入框触发配置的triggerEvent（默认是change）时，捕获当前变更商品项的关键信息（比如商品ID、新数量），然后把这些数据提交到指定的后端控制器接口。

完善后的Widget代码 #

define([ 'jquery', 'jquery/ui' ], function($) { 
    "use strict"; 

    $.widget('web4pro.cart', { 
        options: { 
            triggerEvent: 'change',
            controller: 'http://developer.loc/web4pro_cart/query/custom',
            qty: '[data-role="cart-item-qty"]',
            // 新增：可配置的商品ID属性名，适配你的DOM结构
            itemIdAttr: 'data-item-id'
        }, 

        _create: function() { 
            this._bind(); 
        }, 

        _bind: function() { 
            var self = this; 

            // 用事件委托绑定数量变更事件，支持动态添加的购物车项
            self.element.on(self.options.triggerEvent, self.options.qty, function(e) {
                var $qtyInput = $(this);
                // 获取当前变更的商品数据
                var changedItem = self._getChangedItemInfo($qtyInput);
                
                // 跳过无效的数量值（比如非正整数）
                if (!changedItem) return;
                
                // 提交变更数据到后端
                self._submitUpdate(changedItem);
            });
        },

        // 新增：提取变更商品的关键数据
        _getChangedItemInfo: function($qtyInput) {
            var self = this;
            // 从购物车项容器获取商品ID（根据你的DOM结构调整选择器）
            var itemId = $qtyInput.closest('[data-item-id]').attr(self.options.itemIdAttr);
            // 转换数量为数字，做基础校验
            var newQty = parseInt($qtyInput.val(), 10);

            // 校验数量有效性
            if (isNaN(newQty) || newQty < 1) {
                $qtyInput.val(1); // 重置为默认有效值
                return null;
            }

            // 返回整理好的提交数据，可按需添加SKU等其他字段
            return {
                item_id: itemId,
                qty: newQty
            };
        },

        // 新增：提交变更数据到控制器
        _submitUpdate: function(itemData) {
            var self = this;

            $.ajax({
                url: self.options.controller,
                method: 'POST',
                data: itemData,
                dataType: 'json',
                success: function(res) {
                    // 成功回调：可更新购物车UI、提示用户
                    console.log('数量更新成功:', res);
                    // 触发自定义事件，方便其他组件监听状态
                    self.element.trigger('cart:qtyUpdated', [itemData, res]);
                },
                error: function(xhr, status, err) {
                    // 错误回调：提示用户更新失败
                    console.error('数量更新失败:', err);
                    self.element.trigger('cart:qtyUpdateFailed', [itemData, err]);
                }
            });
        }
    }); 

    return $.web4pro.cart; 
});

关键细节说明 #

• 捕获变更字段：
  通过_getChangedItemInfo方法，从触发事件的数量输入框出发，向上查找包含商品ID的父元素（你需要确保每个购物车项都带有类似data-item-id="xxx"的属性），同时获取并校验输入框的最新数量值。如果你的DOM结构不同（比如商品ID直接在输入框上），只需调整closest的选择器即可。
• 事件委托优势：
  绑定事件到购物车容器self.element，即使后续动态添加新的购物车项，事件依然能生效，不用重复绑定。
• 可配置性：
  把商品ID的属性名做成可配置项itemIdAttr，后续如果DOM结构变化，只需要修改配置而不用改动核心逻辑。
• 数据校验：
  提前校验数量的有效性，避免提交无效数据给后端，提升用户体验。

额外优化建议 #

如果需要支持批量提交多个变更项，可以维护一个变更队列，在用户点击“更新购物车”按钮时一次性提交所有变更，而不是每次数量变化都发起请求，减少后端压力。

内容的提问来源于stack exchange，提问作者Eugene Kapelko