将 class 添加到伪 :before 元素

Question

我正在尝试使用 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">

Answer 1

两件事：

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

原始元素可以有一个 class，因此将 class 附加到该元素，并根据 class。换句话说，不是 #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

几件事。

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

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;
}

将 class 添加到伪 :before 元素

Adding a class to a psuedo :before element

javascript

css

jquery

onchange

pseudo-element