1

我正在做一些事情,我有两个输入字段,一个用于原色,一个用于辅助色。我正在使用JSColor,所以当您单击输入框时,会出现一个颜色选择器,并且当您更改颜色时,输入的背景会更改为该颜色。

好吧,我想有另一个功能,我可以有一些“预制”颜色,有人可以选择形式。所以这就是我所拥有的:

<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')
});

哪个完美。对于主题二,我必须复制整个代码并手动输入我想要的主题二的新十六进制颜色。

我可能有 5 或 6 个主题可供选择,因此可能会很长。我想知道是否有人可以帮助我改进代码,如果有更简单的方法可以做到这一点,并且在我想添加更多主题时更短更灵活?

谢谢!

4

1 回答 1

3

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

<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-13T19:31:17.807 回答