當使用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選擇下拉值時，類不會發生變化

回答

相關問題