Question

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

function divide() {
  let num = 2;
  let den = 0;
  try {
    if (den == 0) {
      throw new Error("division invalid");
    }
    return Number(num / den);
  } catch (e) {
    return e.message;
  }
}
console.log(divide());

Answer 1

两件事：

您错误地将事件处理程序绑定到标签#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规则具有不相等的维度。如果这是一个错误，请注意。

Answer 2

有几件事。

您的更改侦听器需要在输入上。
您不能像这样操纵伪造的元素。相反，你应该将类添加到元素（没有提到的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;
}

在psuedo中添加一个类：在元素之前

2 个答案: