javascript - 有没有办法让代码更简单、更高效？

Question

这是我在 index.blade.php

中的代码

1. HTML

@foreach($sesis as $sesi)
<td>{{ $sesi->waktu }}
     <label class="switch switch-text switch-info switch-pill" id="label-switch{{ $sesi->id }}">
         <input type="checkbox" id="switch-sesi{{ $sesi->id }}" name="status" value="{{ $sesi->id }}" class="switch-input">
         <span data-on="Ada!" data-off="Absen" class="switch-label"></span>
         <span class="switch-handle"></span>
     </label>
</td>
@endforeach

jquery

@foreach($sesis as $sesi)
    $('#switch-sesi{{ $sesi->id }}').on('change', function(){
        if($(this).is(":checked")){
            console.log($(this).val());
        }else{
            console.log('tidak checked');
        }
    });
@endforeach

我的代码没有问题，但看起来我的代码效率不高(请参阅我的 jquery 代码)。我试图通过循环所有 block 代码从输入类型复选框获取 id 属性。我只是想知道，有什么办法可以提高效率吗？

Answer 1

您不需要为每个元素创建jquery，您可以使用诸如id^=switch-sesi之类的东西来选择id开始的所有元素与sesi

$('*[id^=switch-sesi]').on('change', function() {
  if ($(this).is(":checked")) {
    console.log($(this).val());
  } else {
    console.log('tidak checked');
  }
});

工作演示

$('*[id^=switch-sesi]').on('change', function() {
  if ($(this).is(":checked")) {
    console.log($(this).val());
  } else {
    console.log('tidak checked');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
  <label class="switch switch-text switch-info switch-pill" id="label-switch1">
         <input type="checkbox" id="switch-sesi1" name="status" value="1" class="switch-input">
         <span data-on="Ada!" data-off="Absen" class="switch-label"></span>
         <span class="switch-handle"></span>
     </label>
</td>
<td>
  <label class="switch switch-text switch-info switch-pill" id="label-switch2">
         <input type="checkbox" id="switch-sesi2" name="status" value="2" class="switch-input">
         <span data-on="Ada!" data-off="Absen" class="switch-label"></span>
         <span class="switch-handle"></span>
     </label>
</td>