Question

我有一个select下拉列表，应该在更改时触发一个事件。不幸的是，该事件不会在首次更改时被调用。知道为什么在第一次更改时不起作用吗？

表格：

<table>
  <tbody>
    <tr>
      <td class="slot1">Slot<br>1</td>
      <td class="slot2">Slot<br>2</td>
    </tr>
  </tbody>
</table>

选择：

<div class="selects">
  <label>Slot 1</label>
  <select id="slot1" name="slot1">
    <option value="NULL">---Select---</option>
    <option value="on">on</option>
  </select>
  <label>Slot 2</label>
  <select id="slot2" name="slot2">
    <option value="NULL">---Select---</option>
    <option value="on">on</option>
  </select>
  // ...
</div>

JS：

<script type="text/javascript">
  $(document).ready(function(){
    $(document).on('change','.selects',function(){
      var slots = ['1','2','3','4','5','6','7','8','9'];
      $.each(slots, function(index, value) {
        $('#slot'+value).change(function(){
          if($('#slot'+value).val() === 'NULL'){
            switch(value){
              case '1' :
                var v = 'Slot\n1';
                break;
              case '2' :
                var v = 'Slot\n2';
                break;
              // ...
            }
            $('td.slot'+value).text(v);
          }else{
            $('td.slot'+value).text('');
            $('td.slot'+value).prepend('<img src="https://img.icons8.com/material/24/000000/console.png" style="width: 100%; height: 100%; object-fit: contain"\>');
          }
        });
      });
    });
  });
</script>

因此，我将选择更改为值“ on”，没有任何反应。然后我变回--- Select ---，再变回“ on”，然后将清除表格单元格中的文本并显示图像...

感谢您的任何帮助！

安德烈亚斯

Answer 1

您正在使用更改时添加逻辑，因此第一次不会出现。

您可能只使用循环，因为该循环已经在使用selects的ID：

$(document).ready(function() {
  var slots = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
  $.each(slots, function(index, value) {
    $('#slot' + value).change(function() {
      if ($('#slot' + value).val() === 'NULL') {
        switch (value) {
          case '1':
            var v = 'Slot\n1';
            break;
          case '2':
            var v = 'Slot\n2';
            break;
            // ...
        }
        $('td.slot' + value).text(v);
      } else {
        $('td.slot' + value).text('');
        $('td.slot' + value).prepend('<img src="https://img.icons8.com/material/24/000000/console.png" style="width: 100%; height: 100%; object-fit: contain"\>');
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="slot1">Slot<br>1</td>
      <td class="slot2">Slot<br>2</td>
    </tr>
  </tbody>
  <div class="selects">
    <label>Slot 1</label>
    <select id="slot1" name="slot1">
      <option value="NULL">---Select---</option>
      <option value="on">on</option>
    </select>
    <label>Slot 2</label>
    <select id="slot2" name="slot2">
      <option value="NULL">---Select---</option>
      <option value="on">on</option>
    </select>
    // ...
  </div>
</table>

仅在第二次更改选择框后才触发更改的jQuery

1 个答案: