Question

我正在Symfony开展一个项目。我有一些表有一些行，每行的末尾有四个选项。根据每行中选择的选项，我希望整行的颜色发生变化。现在，这个代码在jsfiddle上运行正常，但是在我的项目中，对于每一行，当我第一次选择某个选项时，没有效果，颜色不会改变。当我第二次选择某个选项时，颜色会发生变化。这适用于所有行。我想让颜色第一次改变就像它在jsfiddle中发生的一样。点击此处：https://jsfiddle.net/wqeob4jo/2/

PS：我正在使用REACT JS

＆＃13;

$(document).ready(function() {
  $('select').change(function() {
    var selectedVal = this.value;
    if (selectedVal == "2") {
      $(this).closest('tr').removeClass().addClass('not_wanted')
    } else if (selectedVal == "3") {
      $(this).closest('tr').removeClass().addClass('not_available')
    } else if (selectedVal == "4") {
      $(this).closest('tr').removeClass().addClass('vacation')
    } else if (selectedVal == "5") {
      $(this).closest('tr').removeClass().addClass('priority_off')
    }
  });
});

＆＃13;

table td,
th {
  border: 1px solid black;
  padding-left: 100px;
}
th {
  color: black;
}
tr.not_wanted {
  color: red;
}
tr.not_available {
  color: blue;
}
tr.vacation {
  color: orange;
}
tr.priority_off {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <tr style="background-color:grey;">
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </tr>
  <tr class="options">
    <td>Date 1</td>
    <td>Date 2</td>
    <td>
      <select id="select">
        <option value="2">not_wanted</option>
        <option value="3">not_available</option>
        <option value="4">vacation</option>
        <option value="5">priority_off</option>
      </select>
    </td>
  </tr>
  <tr class="options">
    <td>Date 1</td>
    <td>Date 2</td>
    <td>
      <select id="select">
        <option value="2">not_wanted</option>
        <option value="3">not_available</option>
        <option value="4">vacation</option>
        <option value="5">priority_off</option>
      </select>
    </td>
  </tr>
</table>

＆＃13;

Answer 1

我使用

解决了这个问题

$(document).on('change','#select',function () {...

而不是

$('select').change(function() {...

全功能：

$(document).on('change','#select',function () {
    var selectedVal = this.value;
    if (selectedVal == "2") {
      $(this).closest('tr').removeClass().addClass('not_wanted');
    } else if (selectedVal == "3") {
      $(this).closest('tr').removeClass().addClass('not_available');
    } else if (selectedVal == "4") {
      $(this).closest('tr').removeClass().addClass('vacation');
    } else if (selectedVal == "5") {
      $(this).closest('tr').removeClass().addClass('priority_off');
    }
  });

希望它有所帮助！

延迟改变动作jQuery

1 个答案: