整个代码都可以工作,但当我将代码复制到我的朋友网站时, colored颜色 不会像正常情况下那样更新.不知道为什么现在不起作用.

[咯咯笑]https://pastebin.com/jm8s6gzX[1]

   function loadPalletes() {
        let colorIndexNum = 0;
        for(let palletes in penguinColors) {
            let colorHex = penguinColors[palletes],
                colorIndex = palletes,
                colorIndexCurrNum = ++colorIndexNum;
            $('#palletes').append(`<div data-id="${colorIndexCurrNum}" class="tinyPallete" style="background: #${colorHex}"></div> `);
        }
        $("#palletes").on("click", function(e) {
            let palletId = $(e.target).attr('data-id'); 
            e.currentTarget.querySelector('.active') ?.classList.remove('active');
            if(e.target.classList.contains('tinyPallete')) {
                e.target.classList.add('active');
            }
            $("#penguinDoll").css('background-color', penguinColorByIndex(palletId, false));
            console.log("color updated?")
        });
    }
 
    function penguinColorByIndex(index, keys) {
        if(keys) {
            return(Object.keys(penguinColors)[--index]);
        }
        return(Object.values(penguinColors)[--index]);
    }
    let penguinColors = { 
        "Blue": "003366",
        "Green": "009900",
        "Pink": "FF3399",
        "Black": "333333",
        "Orange": "FF6600",
        "Yellow": "FFCC00",
        "Dark Purple": "660099",
        "Brown": "996600",
        "Red": "CC0000",
        "Dark Green": "006600",
        "Light Blue": "0099CC",
        "Lime Green": "8AE302",
        "Gray": "93A0A4",
        "Aqua": "02A797",
        "Arctic White": "F0F0D8"
    };
   window.onload = function() {
        loadPalletes();
    }

我附上了整个索引页的粘贴箱.

推荐答案

问题是这一行:

$("#penguinDoll").css('background-color', penguinColorByIndex(palletId, false));

特别是返回值penguinColorByIndex,它只是hexvalue(例如333333).

您需要添加哈希以使其有效,例如:

$("#penguinDoll").css('background-color', '#' + penguinColorByIndex(palletId, false));

所以你设定的是#333333,而不是333333.

Javascript相关问答推荐

JavaScript替换子 node 导致它们更改为[对象HTMLTable SectionElement]

TypScript:根据共享属性对项目进行分组并为其分配groupID

JavaScript代理不适用于打开的窗口对象

Promise.all立即跳到那时,而不是调用所有Promise

我在这个黑暗模式按钮上做错了什么?

如何禁用附加图标点击的v—自动完成事件

无法从NextJS组件传递函数作为参数'

虚拟滚动实现使向下滚动可滚动到末尾

如何在Vue 3中创建自定义 Select 组件,并将选项作为HTML而不是props 传递?

如果Arrow函数返回函数,而不是为useEffect返回NULL,则会出现错误

如何强制Sphinx中的自定义js/css文件始终加载更改而不缓存?

如何在每次单击按钮时重新加载HighChart/设置HighChart动画?

使用getBorbingClientRect()更改绝对元素位置

为什么我的按钮没有从&q;1更改为&q;X&q;?

如何限制显示在分页中的可见页面的数量

为列表中的项目设置动画

处理TypeScrip Vue组件未初始化的react 对象

如何根据查询结果重新排列日期

我怎样才能得到一个数组的名字在另一个数组?

为什么我不能使用其同级元素调用和更新子元素?