当使用JQuery选择下拉值时，类不会发生变化

我试图完成的是，当用户从下拉框中选择一个值时，对应的行将根据所选选项更改为不同的颜色。当使用JQuery选择下拉值时，类不会发生变化

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

简化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任何帮助，将不胜感激。

来源

2014-02-06 Steve W.

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

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

DEMO

来源

2014-02-06 22:10:34 Satpal

明白了，完美。现在我意识到这些课程不断冲突，只是不停地添加课程。 –

除了我用于颜色更改的其他类外，不会有任何其他类。 –

@SteveW。，然后它的酷只是使用.removeClass（） – Satpal

当使用JQuery选择下拉值时，类不会发生变化

回答

相关问题