skrollr 插件来转换颜色答案

【问题标题】：skrollr plugin to convert colorsskrollr 插件来转换颜色
【发布时间】：2013-09-04 13:01:14
【问题描述】：

我正在尝试为skrollr 编写一个插件，以允许在不同种类的颜色注释之间进行转换。

这是目前的代码：

它应该在 skrollr 之前运行并将每个颜色注释转换为 HSLA。

我不明白为什么控制台给了我 3 倍相同的结果：

background-color:hsla(56,100,50,  1); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(0,100,50, 0.5); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(0,100,50, 1); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(56,100,50,  1); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(0,100,50, 0.5); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(0,100,50, 1); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(56,100,50,  1); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(0,100,50, 0.5); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(0,100,50, 1); fiddle.jshell.net/nL75k/show/:117

应该是：

background-color:hsla(56,100,50,  1); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(0,100,50, 0.5); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(0,100,50, 1); fiddle.jshell.net/nL75k/show/:117

有什么想法吗？

【问题讨论】：

标签： javascript hex rgb hsl

【解决方案1】：

在getAllDataElements 中，您将遍历所有元素，然后遍历所有属性。但是对于每个数据属性，您都将元素添加到matches。 div有3个data属性，导致它被添加了3次。

简单修复：打破循环

//check if attibute name starts with "data-"
if (attr.indexOf("data-") == 0) {
    matches.push(element); //add it to matches
    break;
}

【讨论】：