javascript - 使用 JQuery 选择下拉值时类不会更改

Question

我想要实现的是，当用户从下拉框中选择一个值时，相应的行将根据所选选项更改为不同的颜色。

到目前为止，我的行颜色改变得很好，但如果用户改变主意并想要选择一个新选项，该行有时不会改变颜色。变化是零星的，有时颜色会再次变化，有时则不会。

简化的 HTML 表格:

<table class="table" id="myTable">
    <tbody>
    <tr>
      <td>1.</td>
      <td>
        <select name="queue" class="queue-drop">
          <option></option>
          <option class="move">Move</option>
          <option class="add">Add</option>
          <option class="change">Change</option>
          <option class="cancel">Cancel</option>
          <option class="swap">Swap</option>
        </select>
      </td>
    </tr>
    <tr>
    <td>2.</td>
      <td>
        <select name="queue" class="queue-drop">
          <option></option>
          <option class="move">Move</option>
          <option class="add">Add</option>
          <option class="change">Change</option>
          <option class="cancel">Cancel</option>
          <option class="swap">Swap</option>
        </select>
      </td>
    </tr>
    </tbody>
  </table>

JQuery:

$(document).ready(function(){
$('.queue-drop').change(function(){
  var selectedVal = $(this).find("option:selected").text();
  if (selectedVal == 'Move') {
    $(this).closest('tr').addClass("move-row")
  }
  else if (selectedVal == "Add") {
    $(this).closest('tr').addClass("add-row")
  }
  else if (selectedVal == "Cancel") {
    $(this).closest('tr').addClass("cancel-row")
  }
  else if (selectedVal == "Change") {
    $(this).closest('tr').addClass('change-row')
  }
  else if (selectedVal == "Swap") {
    $(this).closest('tr').addClass('swap-row')
  }

});

});

JS fiddle :http://jsfiddle.net/exx2q/

我对 JS 和 JQuery 有点陌生，如有帮助，我们将不胜感激。

Answer 1

您可以使用.removeClass() ，清除类然后应用新的

 $(this).closest('tr').removeClass().addClass("move-row")

DEMO