添加课程的问题

Question

我正在尝试在检查输入时添加类。但是，我的尝试没有奏效。该课程没有添加。我尝试了addClass和toggleClass。

有人看到我做错了吗？

 $('.social-input').on('change', function () {
		var social1 = $('#social1');
		var social2 = $('#social2');
		if (social1.is(':checked')) {
			$(this).addClass('active');
		}
		else if (social2.is(':checked')) {
			$(this).toggleClass('active');
			
		}
	});

.social-option-box {
	display: inline-block;
	border: 1px solid #45ba95;
	padding: 20px 0;
	margin: 20px 5%;
	width: 35%;
	text-align: center;
	font-size: 1.2em;
	color: #45ba95;
	cursor: pointer;
	transition: ease-in-out .5s;
}
.social-option-box.active {
	transition: ease-in-out .5s;
	background: #45ba95;
	color: #FFF;
}
.social-option-box:hover {
	background-color: #45ba95;
	color: #FFF;
	transition: ease-in-out .5s;
}
.social-input {
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="social-option-box" for="social1">Yes, following
	<input type="radio" name="social" id="social1" class="social-input" value="Yes, following">
</label>
<label class="social-option-box" for="social2">No, I'm not
	<input type="radio" name="social" id="social2" class="social-input" value="Not following">
</label>

Answer 1

除了其他正确的答案之外，您可以通过执行以下JS来简化这一点。

 $('.social-input').on('change', function () {
       var box = $('.social-option-box');
       var checkedBox = box.has('.social-input:checked');
       box.not(checkedBox).removeClass('active');
       checkedBox.addClass('active');
 });

.social-option-box {
	display: inline-block;
	border: 1px solid #45ba95;
	padding: 20px 0;
	margin: 20px 5%;
	width: 35%;
	text-align: center;
	font-size: 1.2em;
	color: #45ba95;
	cursor: pointer;
	transition: ease-in-out .5s;
}
.social-option-box.active {
	transition: ease-in-out .5s;
	background: #45ba95;
	color: #FFF;
}
.social-option-box:hover {
	background-color: #45ba95;
	color: #FFF;
	transition: ease-in-out .5s;
}
.social-input {
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="social-option-box" for="social1">Yes, following
	<input type="radio" name="social" id="social1" class="social-input" value="Yes, following">
</label>
<label class="social-option-box" for="social2">No, I'm not
	<input type="radio" name="social" id="social2" class="social-input" value="Not following">
</label>

Answer 2

事件处理程序中的$(this)引用调用事件的input，因此类active将添加到输入而不是label。

当您更改代码以匹配最接近的label与按下的输入时，它将起作用：

＆＃13;

＆＃13;

$('.social-input').on('change', function() {
  var social1 = $('#social1');
  var social2 = $('#social2');
  if (social1.is(':checked')) {
    $(this).closest('label').addClass('active');
  } else if (social2.is(':checked')) {
    $(this).closest('label').toggleClass('active');
  }
});

＆＃13;

.social-option-box {
  display: inline-block;
  border: 1px solid #45ba95;
  padding: 20px 0;
  margin: 20px 5%;
  width: 35%;
  text-align: center;
  font-size: 1.2em;
  color: #45ba95;
  cursor: pointer;
  transition: ease-in-out .5s;
}

.social-option-box.active {
  transition: ease-in-out .5s;
  background: #45ba95;
  color: #FFF;
}

.social-option-box:hover {
  background-color: #45ba95;
  color: #FFF;
  transition: ease-in-out .5s;
}

.social-input {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="social-option-box" for="social1">Yes, following
	<input type="radio" name="social" id="social1" class="social-input" value="Yes, following">
</label>
<label class="social-option-box" for="social2">No, I'm not
	<input type="radio" name="social" id="social2" class="social-input" value="Not following">
</label>

＆＃13;

＆＃13;

＆＃13;

Answer 3

由于输入代码在label元素内，我使用parent（）添加toggleclass。

＆＃13;

＆＃13;

$('.social-input').on('change', function () {
		var social1 = $('#social1');
		var social2 = $('#social2');
		if (social1.prop("checked") ) {
			social1.parent().addClass('active');
      social2.parent().removeClass('active');
		}
		else if (social2.prop("checked") ) {
			social2.parent().addClass('active');
      social1.parent().removeClass('active');			
		}
	});

＆＃13;

.social-option-box {
	display: inline-block;
	border: 1px solid #45ba95;
	padding: 20px 0;
	margin: 20px 5%;
	width: 35%;
	text-align: center;
	font-size: 1.2em;
	color: #45ba95;
	cursor: pointer;
	transition: ease-in-out .5s;
}
.social-option-box.active {
	transition: ease-in-out .5s;
	background: #45ba95;
	color: #FFF;
}
.social-option-box:hover {
	background-color: #45ba95;
	color: #FFF;
	transition: ease-in-out .5s;
}
.social-input {
	display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="social-option-box" for="social1">Yes, following
	<input type="radio" name="social" id="social1" class="social-input" value="Yes, following">
</label>
<label class="social-option-box" for="social2">No, I'm not
	<input type="radio" name="social" id="social2" class="social-input" value="Not following">
</label>

＆＃13;

＆＃13;

＆＃13;