将类添加到伪 :before 元素答案

【问题标题】：Adding a class to a psuedo :before element将类添加到伪 :before 元素
【发布时间】：2017-09-26 20:46:15
【问题描述】：

我正在尝试使用change 函数在我的:before 元素中添加图像。我正在做的是在#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">

【问题讨论】：

标签： javascript jquery css onchange pseudo-element

【解决方案1】：

有几件事。

您的更改侦听器需要位于输入本身。
您不能像那样操作伪元素。相反，您应该将类添加到元素中（其中没有提到 psuedo）并相应地设置它的样式。

JS fiddle

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

【讨论】：

没办法。我们俩在写答案的同时，以相同的两件事以相同的顺序作为答案的开头？巫术！
@DerekStory 不不，请留下它以提醒 BoltClock 的人性 :-)
很公平。我会把它留给奇怪的巧合和我收到的赞成票。我不能随便扔掉免费积分。
@BoltClock 谢谢你们俩。你们基本上确实同时发布了答案，并且都有效。不确定要批准哪个答案。
@Paul 批准他的。我的是几秒钟后。

【解决方案2】：

两件事：

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

原始元素可以有一个类，所以把这个类附加到那个元素上，并根据这个类来设置它的伪元素的样式。换句话说，不是#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 规则的维度不相等。只是一个注释，以防万一这是错误的。

【讨论】：