jQuery addClass 定位元素但不添加類

Question

我有以下代碼。

 $("#duration").on("click", function() { $('#duration .select-selected').addClass('select-arrow-active'); $('#duration .select-items').toggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-sm-12 col-md-4 custom-select" id="duration"> <p class="label-title">How much time do you have?</p> <label for="duration"> <select name="duration" class="passes-buscador-select"> <option value="">NOT SURE </option> <option value="less-than-1-week"> Less than 1 week </option> <option value="1-week-to-2-weeks"> 1 week to 2 weeks </option> <option value="more-than-2-weeks"> More than 2 weeks </option> <option value="daytrips"> Day trips </option> </select> </label> <div class="select-selected">NOT SURE </div> <div class="select-items select-hide"> <div> Less than 1 week </div> <div> 1 week to 2 weeks </div> <div> More than 2 weeks </div> <div> Day trips </div> </div> </div>

當用戶單擊該元素時，該類未添加，在與檢查員檢查后，我注意到該元素閃爍，這意味着在我執行時更准確地定位了該元素。

$('#duration .select-selected').addClass('select-arrow-active');  

在控制台上添加了類，所以我不知道會發生什么。 我錯過了什么嗎？

Answer 1

編輯：

我創建了一個帶有編輯元素顏色的 CSS 類的 snipet，顯示正在添加該類。 看：

 $("#duration").on("click", function() { $('#duration .select-selected').addClass('select-arrow-active'); $('#duration .select-items').toggle(); });

 #duration .select-selected { color: blue; } #duration .select-selected.select-arrow-active { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-sm-12 col-md-4 custom-select" id="duration"> <p class="label-title">How much time do you have?</p> <label for="duration"> <select name="duration" class="passes-buscador-select"> <option value="">NOT SURE </option> <option value="less-than-1-week"> Less than 1 week </option> <option value="1-week-to-2-weeks"> 1 week to 2 weeks </option> <option value="more-than-2-weeks"> More than 2 weeks </option> <option value="daytrips"> Day trips </option> </select> </label> <div class="select-selected">NOT SURE </div> <div class="select-items select-hide"> <div> Less than 1 week </div> <div> 1 week to 2 weeks </div> <div> More than 2 weeks </div> <div> Day trips </div> </div> </div>