javascript - 鼠标单击按钮时更改悬停颜色
问题描述
当鼠标单击按钮时,我尝试更改悬停颜色,但通过浏览器出现错误,请检查以下内容。
浏览器结果:
VM898 home.php:62 Uncaught TypeError: Cannot read property 'link-privacy-policy' of undefined
at HTMLAnchorElement.<anonymous> (VM898 home.php:62)
at HTMLAnchorElement.handle (jquery-3.4.0.js:5707)
at HTMLAnchorElement.dispatch (jquery-3.4.0.js:5233)
at HTMLAnchorElement.elemData.handle (jquery-3.4.0.js:5040)
jQuery代码
<script>
let color_count = 0;
let colors = [{
"name": "blue",
"btn-change-color": "#7f8ff4",
"btn-start": "#7f8ff4",
"link-privacy-policy": "#7f8ff4"
},
{
"name": "orange",
"btn-change-color": "#f8d745",
"btn-start": "#f8d745",
"link-privacy-policy": "#f8d745"
}];
let btnChangeColor = document.getElementsByClassName("btn-change-color");
let btnStart = document.getElementsByClassName("btn-start");
let linkPrivacyPolicy = document.getElementsByClassName("link-privacy-policy");
$(".btn-change-color").click(function () {
$(btnChangeColor).css("background", colors[color_count]["btn-change-color"]);
$(btnStart).css("background", colors[color_count]["btn-start"]);
$(linkPrivacyPolicy).hover(function () {
$(this).css('color', colors[color_count]["link-privacy-policy"]);
$(this).css('border-bottom', '1px solid ' + colors[color_count]["link-privacy-policy"]);
})
color_count++;
});
</script>
注意:第 62 行以此行开头:
$(this).css('color', colors[color_count]["link-privacy-policy"]);
解决方案
有时,解读错误消息可能会令人困惑:
Cannot read property 'link-privacy-policy' of undefined
这实际上意味着以下代码...
colors[color_count]["link-privacy-policy"]
...引发错误,因为colors[color_count]
计算结果为undefined
- 因此该值自然没有属性link-privacy-policy
。
@Robin Zigmond 的评论(在我输入这个答案时添加)可以解释你为什么打undefined
推荐阅读
- reactjs - 当更改来自另一个组件时,如何让 useEffect 仅更新更改
- regex - 从符号“X”之后的文本中提取数字
- c++ - 删除了复制构造函数的类仍然可以复制吗?
- javascript - 如何以天为单位获取 JS 中的日期差异(不考虑小时差异)
- c# - 在 Query 上用另一个模型初始化模型
- cypress - 使用 cypress 在浏览器选项卡上测试静音控制
- sas - 专注于“结果查看器”的快捷键
- json - NVD3:是否可以将输入数据和配置作为 JSON ,绘制堆叠的多轴图并绘制三角形图?
- java - 如何在多个数据中心的微服务项目中实现高 TPS?
- asp.net - 尝试初始化 Azure AD 时出现 404 未找到错误