Question

这是我在Could not load the field named [...] on the class [...] IllegalArgumentException: Can not set static ... field ... to ...中的代码

HTML

index.blade.php

jquery

@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代码）。我正在尝试通过循环所有块代码从输入类型复选框获取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>

Answer 2

$(".switch-input").on("change",function(){
  if($(this).is(":checked")){
    alert($(this).val());
  }else{
    alert("Unchecked.");
  }
});

input{
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" class="switch-input" value="A">

<input type="checkbox" class="switch-input" value="B">

<input type="checkbox" class="switch-input" value="C">

<input type="checkbox" class="switch-input" value="D">

<input type="checkbox" class="switch-input" value="E">

由于您已经在输入字段（复选框）中添加了类switch-input，因此您可以仅在jquery中使用该引用，而不必遍历它们来添加事件处理程序。

只有一个，而不是foreach；

$('.switch-input').on('change', function(){
  if($(this).is(":checked")){
    console.log($(this).val());
  }else{
     console.log('tidak checked');
  }
});

无论如何，有什么可以使代码更简单和有效的？

2 个答案: