在 Blade Foreach 循环中动态隐藏元素

Question

我在 Laravel Blade 中有一个表单，其中包含需要动态隐藏和显示的数据。这是代码。

@foreach ($working_orders as $key => $order)
      <div class="col-lg-12 row ">
          <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()">
                      <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">
              <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

和jQuery

function getOrderFields() 
{
    if ($(".truck_type :selected").val() == '2') 
    {
        $('.assigner_div').show();
    }
    if ($(".truck_type :selected").val() == '1') 
    {
        $('.assigner_div').hide();
    }
}

此代码隐藏和显示字段，但问题是我使用的是 classes，因此 foreach 循环中的所有元素都具有相同的 class 并且 hides/shows 所有字段。例如：我在给 foreach 循环的数组中有两个键。因此，我更改了循环的键 0 中的字段，它在第二个键的两个键中隐藏了 div。我需要 hide/show 个字段来选择订单，而不是全部。这个问题的解决方案是什么？

Answer 1

DEMO

我会考虑更改要使用 jQuery 设置的事件处理程序，而不是使用 onchange 属性。然后，您可以将 DOM Traversal 方法与 $(this) 选择器结合使用，以完成您想要的操作。粗略示例：

$(document).on('change', 'select.truck_type', function(){
    var val = $(this).val(),
        assigner = $(this).parents('.row').children('.assigner_div');
    assigner.toggle(val === '2');
});

在这个例子中我们使用了parents, and children methods. There are many different methods that could be used though. For instance the next方法：

$(document).on('change', 'select.truck_type', function(){
    var val = $(this).val(),
        assigner = $(this).parents('.title-md').next();
    assigner.toggle(val === '2');
});

还有find, and closest方法：

$(document).on('change', 'select.truck_type', function(){
    var val = $(this).val(),
        assigner = $(this).closest('.row').find('.assigner_div');
    assigner.toggle(val === '2');
});

Answer 2

您可以使用 $key in foreach 循环来完成给定的任务。将 $key 传递给 getOrderFields 函数，并根据 $key 更改 class 名称。以下是根据您的问题更改的代码段。

...
  <select class="form-control kt-selectpicker truck_type" required name="truck_type" onchange="getOrderFields({{ $key }})">
...
  <div class="form-group col-lg-6 assigner_div_{{ $key }}">
...

在脚本中，

function getOrderFields(key) {
   if ($(".truck_type :selected").val() == '2') {
      $('.assigner_div_' + key).show();
   }
   if ($(".truck_type :selected").val() == '1') {
      $('.assigner_div_' + key).hide();
   }
}

在 Blade Foreach 循环中动态隐藏元素

Hide Elements Dynamically in Blade Foreach Loop

javascript

jquery

custom-data-attribute

laravel

laravel-blade