时间戳

首页 > 解决方案 > jQuery addClass 定位元素但不添加类

javascript - jQuery addClass 定位元素但不添加类

问题描述

我有以下代码。

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

在控制台上添加了类，所以我不知道会发生什么。我错过了什么吗？

标签： javascriptjqueryonclick

解决方案

编辑：

我创建了一个带有 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>

推荐阅读