javascript - 鼠标单击按钮时更改悬停颜色

标签 javascript jquery

我试图在鼠标单击按钮时更改悬停颜色,但我通过浏览器收到错误消息,请查看下方。

浏览器结果:

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>

Note : Line 62 starts with this line :
$(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

关于javascript - 鼠标单击按钮时更改悬停颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55993651/

相关文章:

asp.net - 从 jquery 访问 ASP.NET Web 服务器控件

jQuery 模式在 IE 中不更新

javascript - 在javascript中将字符串转换为数字时如何保留前导零

javascript - 如何创建具有 dataTransfer 属性的事件?

javascript - 删除模板中的 django url 前缀

c# - 从 ASMX webservice 读取 XML 数据以实现 Jquery 自动完成

javascript - 如何在更改 HTML 元素的内容时保留选择

javascript - select 中的 ng-model 未定义

javascript - 根据内容溢出更改表格单元格内容

php - 如何在 jquery、codeigniter 实时搜索结果中建立链接?