如何在Laravel Blade的foreach循环中实现单条记录对应元素动态显隐

解决方法 #

1. 修改Blade模板代码 #

调整两处代码：一是下拉框的onchange事件传入当前触发元素this，二是给assigner_div添加默认隐藏样式，适配默认选择「不分配」的初始状态。

@foreach ($working_orders as $key => $order)
      <div class="col-lg-12 row work-order-item">
          <div class="title-md">Work Order # {{$order->id}}</div>
              <div class="form-group col-lg-6">
                  <label style="color: #44484d;">Camión</label>
                  <select class="form-control kt-selectpicker truck_type" required name="truck_type" onchange="getOrderFields(this)">
                      <option value="1" selected>No asignar</option>
                      <option value="2">Asignar empresa de logística</option>
                  </select>
              </div>
          </div>
          <div class="form-group col-lg-6 assigner_div" style="display:none;">
              <label style="color: #44484d;">Assigner</label>
              <div class="input-group">
                  <select class="form-control kt-selectpicker" required name="truck_assigner"> 
                     <option selected="" disabled>❗</option>
                     @foreach ($truck_assigners as $truck_assigner)
                         <option> {{ $truck_assigner->staffs->name }}</option>
                     @endforeach
                    </select>
               </div>
           </div>
       </div>
@endforeach

2. 修改jQuery代码 #

调整函数逻辑，基于当前触发元素定位对应工单的目标div：

function getOrderFields(ele) 
{
    // 获取当前操作的下拉框的值
    let selectedVal = $(ele).val();
    // 向上查找当前工单所在的父级行容器
    let $currentOrderRow = $(ele).closest('.row');
    // 在当前行容器内查找对应的assigner_div
    let $targetDiv = $currentOrderRow.find('.assigner_div');
    
    if (selectedVal == '2') {
        $targetDiv.show();
    } else {
        $targetDiv.hide();
    }
}

实现逻辑 #

原有问题的核心是全局选择了所有.assigner_div类元素，修改后从当前触发事件的下拉框出发，通过层级查找仅命中当前工单对应的目标元素，不会影响其他循环生成的工单条目。 #

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