jQuery删除重复的代码 - 更简单的解决方案？

我正在处理somethign，我有两个输入字段，一个用于主要颜色，另一个用于辅助颜色。我正在使用JSColor因此，当您单击输入框时会出现颜色选择器，并且当您更改颜色时，输入的背景会更改为该颜色。jQuery删除重复的代码 - 更简单的解决方案？

嗯，我想有另一个特点，我可以有一些“预制”的色彩，有人可以选择的形式。所以这里是我有：

<a id="standardTheme">Standard Theme</a> 
<a id="themeTwo">Theme Two</a>

等等。而我的jQuery是：

$('#standardTheme').click(function() { 
    var primaryPicker = new jscolor.color(document.getElementById('primaryColor'), {}) 
     primaryPicker.fromString('FF0000') 

    var secondaryPicker = new jscolor.color(document.getElementById('secondaryColor'), {}) 
     secondaryPicker.fromString('000000') 
});

这是完美的。那么对于themeTwo我将不得不复制整个代码，并手动输入我想要的主题二新的十六进制颜色。

我可能有5或6个主题可供选择，这样可能会变得很长。我想知道是否有人可以帮助我改进代码，如果有更简单的方法可以做到这一点，更短，更灵活的时候，我想添加更多的主题？

谢谢！

来源

2011-12-13 Drew

为什么不简单地将数据与您点击的按钮关联？

<button class="themeButton" data-primary-color="FF0000" data-secondary-color="000000">Standard</button>

然后在jQuery的：

$('.themeButton').click(function() 
{ 
    var primaryColor = $(this).data('primary-color'); 
    var secondaryColor = $(this).data('secondary-color'); 

    // OR the more verbose way 

    var primaryColor = $(this).attr('data-primary-color'); 
    var secondaryColor = $(this).attr('data-secondary-color'); 

    // Do your code with the primary and secondary color text 
});

，因为你需要放置你需要，只要你适当地对每个按钮设置的属性然而，许多按钮，然后就可以延长许多倍。然后，您可以在所有按钮之间共享回调。

来源

2011-12-13 19:31:17 Tejs

哇！这将工作完美。我一直忘记我可以将自定义数据放在我的元素上。谢谢：） – Drew 2011-12-13 19:36:50

jQuery删除重复的代码 - 更简单的解决方案？

回答

相关问题