Laravel 视图选择商品尺码传值至控制器及选中样式切换实现

• 控制器收到的$size始终为null：你当前的加购入口是普通<a>标签发起的GET跳转请求，页面里散落的<input type="hidden">既没有被包裹在可提交的表单结构内，点击加购时也没有JS逻辑将选中的尺码值拼接为请求参数，服务端自然无法获取对应值
• 尺码选中样式不联动：现有changeText函数仅会给当前点击的尺码元素追加选中样式，完全没有遍历同商品卡片下的其他尺码选项，将之前已选中的样式恢复为默认状态，因此会出现多个尺码同时保持选中样式的问题

视图层结构调整 #

移除原来散在每个尺码块里的冗余隐藏input，直接把尺码值作为参数传给选择函数；同时给每个商品的加购标签增加自定义属性，用来存储当前选中的尺码值：

@if($stock->stock>0)
<div class="all-sizes">
    <div id="stock-size-{{$stock->id}}" 
         class="stock-size" 
         onclick="selectSize({{$stock->id}}, '{{$stock->size}}', {{$product->id}})">
        <span>{{$stock->size}}</span>
    </div>
@endif

对应调整加购标签的结构：

<a href="{{route('cart.add', ['id' => $product->id])}}" 
   class="addCart" 
   id="addCart-{{$product->id}}"
   data-selected-size="">
    Add to Cart
</a>

JS逻辑重写 #

把原来独立的样式修改函数整个替换，同时实现「样式重置、选中态切换、选中值存储」三个功能：

function selectSize(stockId, selectedSize, productId) {
    // 定位当前尺码所属的商品卡片，避免跨商品卡片的样式污染
    const currentCard = document.querySelector(`#card-${productId}`);
    // 遍历当前卡片下的所有尺码选项，全部重置为默认样式
    const allSizeItems = currentCard.querySelectorAll('.stock-size');
    allSizeItems.forEach(item => {
        item.style.borderStyle = '';
        item.style.backgroundColor = '';
        item.querySelector('span').style.color = '';
    });
    // 给当前点击的尺码追加选中样式
    const currentSizeItem = document.querySelector(`#stock-size-${stockId}`);
    currentSizeItem.style.borderStyle = "none";
    currentSizeItem.style.backgroundColor = "black";
    currentSizeItem.querySelector('span').style.color = "white";
    // 把选中的尺码值存储到对应商品的加购按钮上
    const addCartBtn = currentCard.querySelector(`#addCart-${productId}`);
    addCartBtn.dataset.selectedSize = selectedSize;
}

再给所有加购按钮增加点击拦截逻辑，把选中的尺码值拼接到加购请求的参数中，同时补充未选尺码的提示逻辑：

document.querySelectorAll('.addCart').forEach(btn => {
    btn.addEventListener('click', function(e) {
        // 阻止标签默认跳转行为
        e.preventDefault();
        const selectedSize = this.dataset.selectedSize;
        // 未选择尺码时给出提示，避免传空值给后端
        if (!selectedSize) {
            alert('请先选择对应尺码再加入购物车');
            return;
        }
        // 拼接参数后触发跳转
        const originalHref = this.getAttribute('href');
        window.location.href = `${originalHref}?size=${encodeURIComponent(selectedSize)}`;
    });
});

控制器调整 #

现有控制器的接收逻辑无需大改，因为请求已经会将选中的尺码作为查询参数携带到后端，原来的$request->input('size')即可正常获取值，不会再出现null的问题。

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