点击class为label的元素时文本颜色无法设置为#ffffff的jQuery问题排查

这个问题的核心在于箭头函数的this指向特性，我来帮你拆解和修复：

问题根源 #

你在点击事件的处理函数中使用了箭头函数，但箭头函数不会绑定自己的this，它会直接继承外层上下文（也就是$(document).ready回调里的this，这里指向的是document对象）。所以代码里的$(this)根本不是你点击的那个.label元素，自然没法修改它的文本颜色——而且因为没有语法错误，控制台也不会输出报错信息。

两种修复方案 #

方案1：改用普通函数作为事件回调 #

普通函数在事件触发时，this会自动指向触发事件的DOM元素，这样就能正确选中你点击的.label：

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

方案2：通过事件对象获取目标元素（保留箭头函数） #

如果你想继续使用箭头函数，可以利用事件参数的target属性，再通过closest()确保选中外层的.label（因为点击的可能是内部的<input>元素）：

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

效果验证 #

修改后点击任意.label区域（包括里面的单选框），文本颜色都会变为#ffffff，完全符合你的需求。

内容的提问来源于stack exchange，提问作者user11292838