動作變化的延遲jQuery

我正在Symfony的一個項目中工作。我有一個表有一些行，每行的結尾有四個選項。根據每行中選擇的選項，我希望整行的顏色發生改變。現在，這段代碼可以在jsfiddle上正常工作，但是在我的項目中，對於每一行，當我第一次選擇某個選項時，沒有任何效果，顏色不會改變。當我第二次選擇某個選項時，顏色會改變。這適用於所有行。我希望顏色能夠像第一次在jsfiddle中改變一樣。鏈接在這裏：https://jsfiddle.net/wqeob4jo/2/動作變化的延遲jQuery

PS：我用的REACT JS

$(document).ready(function() { 
 
    $('select').change(function() { 
 
    var selectedVal = this.value; 
 
    if (selectedVal == "2") { 
 
     $(this).closest('tr').removeClass().addClass('not_wanted') 
 
    } else if (selectedVal == "3") { 
 
     $(this).closest('tr').removeClass().addClass('not_available') 
 
    } else if (selectedVal == "4") { 
 
     $(this).closest('tr').removeClass().addClass('vacation') 
 
    } else if (selectedVal == "5") { 
 
     $(this).closest('tr').removeClass().addClass('priority_off') 
 
    } 
 
    }); 
 
});

table td, 
 
th { 
 
    border: 1px solid black; 
 
    padding-left: 100px; 
 
} 
 
th { 
 
    color: black; 
 
} 
 
tr.not_wanted { 
 
    color: red; 
 
} 
 
tr.not_available { 
 
    color: blue; 
 
} 
 
tr.vacation { 
 
    color: orange; 
 
} 
 
tr.priority_off { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table"> 
 
    <tr style="background-color:grey;"> 
 
    <th>Col 1</th> 
 
    <th>Col 2</th> 
 
    <th>Col 3</th> 
 
    </tr> 
 
    <tr class="options"> 
 
    <td>Date 1</td> 
 
    <td>Date 2</td> 
 
    <td> 
 
     <select id="select"> 
 
     <option value="2">not_wanted</option> 
 
     <option value="3">not_available</option> 
 
     <option value="4">vacation</option> 
 
     <option value="5">priority_off</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr class="options"> 
 
    <td>Date 1</td> 
 
    <td>Date 2</td> 
 
    <td> 
 
     <select id="select"> 
 
     <option value="2">not_wanted</option> 
 
     <option value="3">not_available</option> 
 
     <option value="4">vacation</option> 
 
     <option value="5">priority_off</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2016-03-04 trollster

在Symfony項目中，您的顏色更改代碼是否會有另一個javascript衝突？除非存在衝突/代碼不同，否則請不要在Symfony第一次在jsFiddle上工作時找不到原因。 – toomanyredirects

我不知道。毫無疑問，通過一些JavaScript代碼動態加載，但我無法弄清楚究竟發生了什麼問題。 – trollster

嘗試在回調函數內添加一個'console.log'行，然後在控制檯中查看消息？如果它是第一次觸發，但沒有發生顏色變化將是一個很好的起點。 – toomanyredirects

我用

$(document).on('change','#select',function() {...

，而不是

$('select').change(function() {...

修復了這個問題

全功能：

$(document).on('change','#select',function() { 
    var selectedVal = this.value; 
    if (selectedVal == "2") { 
     $(this).closest('tr').removeClass().addClass('not_wanted'); 
    } else if (selectedVal == "3") { 
     $(this).closest('tr').removeClass().addClass('not_available'); 
    } else if (selectedVal == "4") { 
     $(this).closest('tr').removeClass().addClass('vacation'); 
    } else if (selectedVal == "5") { 
     $(this).closest('tr').removeClass().addClass('priority_off'); 
    } 
    });

希望它有幫助！

來源

2016-03-04 16:37:06 Observer

對不起，但即使後來的效果已經無效。這不起作用。 – trollster

我不關注。在JS fiddle https://jsfiddle.net/wqeob4jo/4/和我的電腦上的本地HTML中都很好用。 – Observer

動作變化的延遲jQuery

回答

相關問題