jQuery элемент таргетинга addClass, но не добавление класса - PullRequest
Новая
       5

jQuery элемент таргетинга addClass, но не добавление класса

0 голосов
/ 12 февраля 2020

У меня есть следующий код. 

$("#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');

На консоли добавляется класс, поэтому я понятия не имею, что может происходить. Я что-то упустил?

1 Ответ

1 голос
/ 12 февраля 2020

Редактировать :

Я создал фрагмент с классом CSS, редактирующим цвет элемента, показывающий, что класс добавляется. Смотри: 

$("#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>
...