Blade条件渲染下jQuery实现商品加购正确传参方案

需求说明 #

需要在商品列表页通过jQuery实现两类商品的「Add to Cart」加购逻辑：

• 无规格属性商品（is_attribute=0）：无需用户选择规格，默认传入size=small即可直接加购
• 带规格属性商品（is_attribute=1）：用户必须先选择对应规格属性才可加购，未选择时弹出提示
  原有代码存在两个已知问题：
• 带属性商品切换下拉选项后，只能获取第一次选中的属性值，无法拿到最新选择结果
• 无属性商品无法正确抓取默认存储的small尺寸值

问题根因 #

1. 下拉值获取异常：页面初始化时提前缓存了.prodsize的取值，点击按钮时直接使用了初始化阶段的旧值，没有在点击触发时实时读取当前选中状态
2. 无属性商品值抓取异常：元素查找没有限定在当前点击按钮所属的商品容器范围内，或者对text类型input使用了下拉元素专属的取值方法，导致读值失败

修正后实现代码 #

核心原则 #

所有商品属性值必须在加购按钮点击事件触发时，在当前按钮所属的商品卡片范围内实时查找读取，禁止提前缓存属性值。

Blade模板部分 #

统一商品卡片外层类名，方便定位当前操作的商品，两类商品的尺寸存储元素统一使用.prodsize类名：

{{-- 单个商品卡片，加product-item类做范围限定，存商品id、是否带属性的标识 --}}
<div class="product-item" data-is-attribute="{{$product->is_attribute}}">
    <h4>{{$product->name}}</h4>
    <p>售价：¥{{$product->price}}</p>
    @if($product->is_attribute == 0)
        {{-- 无属性商品：存默认small值，用hidden类型隐藏即可，保留原有text类型也不影响读值 --}}
        <input type="hidden" class="prodsize" value="small">
    @else
        {{-- 带属性商品：第一个选项留空做未选择校验 --}}
        <select class="prodsize">
            <option value="">请选择商品规格</option>
            @foreach($product->attribute_list as $attr)
                <option value="{{$attr->value}}">{{$attr->value}}</option>
            @endforeach
        </select>
    @endif
    <button class="add-cart-btn" data-pid="{{$product->id}}">Add to Cart</button>
</div>

jQuery逻辑部分 #

$(function(){
    // 绑定加购按钮点击事件
    $('.add-cart-btn').on('click', function(){
        // 定位当前点击按钮所属的商品容器，避免跨商品读错值
        const $currentItem = $(this).closest('.product-item');
        const pid = $(this).data('pid');
        // 实时读取当前商品的size值：.val()方法对input、select元素通用，无需分开写逻辑
        const size = $currentItem.find('.prodsize').val();
        // 判断是否为带属性商品，做规格校验
        const isAttrItem = Number($currentItem.data('is-attribute')) === 1;
        if(isAttrItem && $.trim(size) === ''){
            alert('请先选择商品规格再加购');
            return false;
        }
        // 发起AJAX加购请求
        $.post('/cart/add', {
            product_id: pid,
            size: size,
            _token: $('meta[name="csrf-token"]').attr('content')
        }, function(res){
            if(res.code === 0){
                alert('加购成功');
                // 此处可追加购物车角标数量更新等逻辑
            }else{
                alert(res.msg || '加购失败，请重试');
            }
        }).fail(function(){
            alert('网络异常，请稍后重试');
        })
    })
})

关键注意点 #

• 不要在页面加载阶段提前存储.prodsize的取值，每次点击时实时读取即可解决下拉切换值不更新的问题
• jQuery的.val()是通用表单取值方法，支持所有input、select、textarea元素，无需为text输入框和下拉选择框写两套取值逻辑
• 所有元素查找必须限定在当前商品容器.product-item范围内，避免列表多商品时选到其他商品的属性值
• 带属性商品的下拉框必须保留第一个空值选项，配合校验逻辑即可实现未选择提示的效果

内容的提问来源于stack exchange，提问作者stephen waweru99