2014-02-06 47 views
0

我試圖完成的是,當用戶從下拉框中選擇一個值時,對應的行將根據所選選項更改爲不同的顏色。當使用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任何幫助,將不勝感激。

回答

3

您可以使用.removeClass(),以清除類,然後應用新的一個

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

DEMO

+0

明白了,完美。現在我意識到這些課程不斷衝突,只是不停地添加課程。 –

+0

除了我用於顏色更改的其他類外,不會有任何其他類。 –

+0

@SteveW。,然後它的酷只是使用.removeClass() – Satpal

相關問題