Question

我正在处理一些我有两个输入字段的地方，一个用于原色，一个用于二色。我正在使用 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')
});

哪种方法很完美。好吧，对于themeTwo，我将不得不复制整个代码并手动输入我想要的主题二的新十六进制颜色。

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

谢谢！

Answer 1

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

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

只要您在每个按钮上正确设置属性，就可以根据需要放置多少个按钮。然后，您可以在所有按钮之间共享回调。

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

1 个答案: