单击jQuery元素时不会更改文本颜色

Question

我的代码没有将label元素的文本颜色更改为#ffffff。未记录任何错误。

JS代码

$(document).ready(() => {
$('.label').on("click", () => {
$(this).css("color", "#ffffff")
})
})

HTML代码

<div id="q1">
<img src="lizerds/l2.jpeg" class="img"/>
<div>
<div class="radioWrapper">
<label class="label">
<input type="radio" id="q1Snake" class="radio" name="q1radio">
Snake
</label>
</div>
<div class="radioWrapper">
<label class="label">
<input type="radio" id="q1Lizard" class="radio" name="q1radio">
Legless Lizard
</label>
</div>
</div>
</div>

Answer 1

您就快到了。使用currentTarget捕获当前元素。

注意：请避免使用内联CSS，而不是内联use类

$(document).ready((elm) => {
$('.label').on("click", (elm) => {
var $this = $(elm.currentTarget);
$('.label').removeClass('yourClss'); // Remove previous added class before add class in current markup
$this.addClass('yourClss')
})
})

.yourClss {
color: #ffffff
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="q1">
<img src="lizerds/l2.jpeg" class="img" />
<div>
<div class="radioWrapper">
<label class="label">
<input type="radio" id="q1Snake" class="radio" name="q1radio">
Snake
</label>
</div>
<div class="radioWrapper">
<label class="label">
<input type="radio" id="q1Lizard" class="radio" name="q1radio">
Legless Lizard
</label>
</div>
</div>
</div>

Answer 2

您不能在匿名函数中使用this来引用本地实例。将箭头函数更改为"0"；函数"；您的代码将按预期工作：

$(document).ready(() => {
$('.label').on("click", function() {
$(this).css("color", "red")
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="q1">
<img src="lizerds/l2.jpeg" class="img"/>
<div>
<div class="radioWrapper">
<label class="label">
<input type="radio" id="q1Snake" class="radio" name="q1radio">
Snake
</label>
</div>
<div class="radioWrapper">
<label class="label">
<input type="radio" id="q1Lizard" class="radio" name="q1radio">
Legless Lizard
</label>
</div>
</div>
</div>

Answer 3

之所以出现此问题，是因为您正试图使用箭头函数实现this上下文
正如MDN官方文件所说：

• 箭头函数："没有自己到this或super的绑定，不应用作方法">

你应该这样做：

$(document).ready(() => {
$('.label').on("click", function() {
$(this).css("color", "#ffffff")
})
})

而不是这个

$(document).ready(() => {
$('.label').on("click", () => {
$(this).css("color", "#ffffff")
})
})

Answer 4

您必须捕获函数中的当前元素。请使用此代码

$(document).ready((elem) => {
$('.label').on("click", (elem) => {
var current = $(elem.currentTarget);
$(current).css("color","#ffffff");
})
})