javascript - skrollr 插件来转换颜色

Question

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

这是目前的代码：

http://jsfiddle.net/nL75k/

它应该在 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

任何的想法？

Answer 1

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

简单的修复：打破循环

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