将类添加到伪：before元素

Question

我想用:before函数在我的change元素中添加一个图像。我正在做的是在#signupCheck周围包裹一个标签作为复选框输入。我在我的更改事件中添加了一个console.log语句，它没有运行，所以我不确定我做错了什么。

有没有人看到任何可能导致这不起作用的东西？

$('#proposal-check-wrap').on('change', function() {
  $('#signupCheck:before').addClass('active');
  console.log("change worked");
});

#proposal-check {
	display: none;
}
#signupCheck:before {
	width: 40px;
	height: 40px;
	border: 1px solid #858585;
	background: #333333;
	content: '';
	float: left;
	display: block;
	margin: 0 10px 0 2.4%;
}
#signupCheck:before.active {
	background-image: url("https://lh3.ggpht.com/OHBD2vcwNk80-q1P84NDmYjnwNmD8R-FjJagxvfcZhGHeRx6dNFX12afBL4e88nCra0=w300");
	background-size: 30px 30px;
    background-repeat: no-repeat;
	background-position: center;
	height: 30px;
	width: 30px;
}
#signupCheck {
	color: #858585;
	font-size: 1.3rem;
	cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="proposal-check" id="proposal-check-wrap">
  <p id="signupCheck">Sign me up</p>
</label>
<input type="checkbox" id="proposal-check">

Answer 1

两件事情：

1. 您错误地将事件处理程序绑定到标签#proposal-check-wrap而不是复选框#proposal-check。
2. 伪元素不能具有属性。

原始元素可以有一个类，因此将类附加到该元素，并根据类设置其伪元素的样式。换句话说，而不是#signupCheck:before.active，将规则应用于#signupCheck.active:before：

$('#proposal-check').on('change', function() {
  $('#signupCheck').addClass('active');
  console.log("change worked");
});

#proposal-check {
	display: none;
}
#signupCheck:before {
	width: 40px;
	height: 40px;
	border: 1px solid #858585;
	background: #333333;
	content: '';
	float: left;
	display: block;
	margin: 0 10px 0 2.4%;
}
#signupCheck.active:before {
	background-image: url("https://lh3.ggpht.com/OHBD2vcwNk80-q1P84NDmYjnwNmD8R-FjJagxvfcZhGHeRx6dNFX12afBL4e88nCra0=w300");
	background-size: 30px 30px;
    background-repeat: no-repeat;
	background-position: center;
	height: 30px;
	width: 30px;
}
#signupCheck {
	color: #858585;
	font-size: 1.3rem;
	cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="proposal-check" id="proposal-check-wrap">
  <p id="signupCheck">Sign me up</p>
</label>
<input type="checkbox" id="proposal-check">

顺便说一句，你的两条:before规则具有不相等的尺寸。只是一个注释，以防这是一个错误。

Answer 2

有几件事。

1. 您的更改侦听器需要在输入本身上。
2. 你无法像这样操纵伪元素。相反，你应该将类添加到元素（没有在其中提到伪）并相应地设置它。

JS fiddle

JS

$('#proposal-check').on('change', function() {
  $('#signupCheck').addClass('active');
});

CSS

#signupCheck.active:before {
    background-image: url("https://lh3.ggpht.com/OHBD2vcwNk80-q1P84NDmYjnwNmD8R-FjJagxvfcZhGHeRx6dNFX12afBL4e88nCra0=w300");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center;
    height: 30px;
    width: 30px;
}