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小提琴：http://jsfiddle.net/exx2q/

我对JS和JQuery有些新意，我们将不胜感激。

Answer 1

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

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

DEMO

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

1 个答案: