[英]jQuery element is not changing text color when clicked
My code is not changing the text color of the label element to #ffffff
.我的代码没有将
#ffffff
元素的文本颜色更改为 #ffffff 。 No errors are logged.没有记录错误。
JS Code JS代码
$(document).ready(() => {
$('.label').on("click", () => {
$(this).css("color", "#ffffff")
})
})
HTML Code 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>
You can not use this
in an anonymous function to refer to the local instance.您不能在匿名 function 中使用
this
来引用本地实例。 Change the arrow function to a "function" and your code will work as expected:将箭头 function 更改为“函数”,您的代码将按预期工作:
$(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>
You are almost there.你快到了。 Use
currentTarget
to catch current element.使用
currentTarget
捕获当前元素。
Note: Please avoid inline CSS, instead of inline use class.注意:请避免内联 CSS,而不是内联使用 class。
$(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>
This problem is happening because you're trying to achieve this
context with an arrow function.发生此问题是因为您尝试使用箭头 function 来实现
this
上下文。
As the official MDN documentation says:正如MDN 官方文档所说:
You should be doing this:你应该这样做:
$(document).ready(() => {
$('.label').on("click", function() {
$(this).css("color", "#ffffff")
})
})
Instead of this而不是这个
$(document).ready(() => {
$('.label').on("click", () => {
$(this).css("color", "#ffffff")
})
})
You have to catch current element in your function.您必须在 function 中捕获当前元素。 Please use this code
请使用此代码
$(document).ready((elem) => {
$('.label').on("click", (elem) => {
var current = $(elem.currentTarget);
$(current).css("color","#ffffff");
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.