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

jQuery Removing Duplicate Code - Easier Solution?

本文关键字：更简单 解决方案 代码 删除 jQuery      更新时间：2023-09-26

我正在研究的东西，我有两个输入字段，一个用于主要颜色，一个用于次要颜色。我使用的是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，我必须复制整个代码并手动输入我想要的主题2的新十六进制颜色。

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

谢谢!

为什么不简单地将数据与您正在单击的按钮关联起来呢?

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

然后，只要在每个按钮上适当地设置属性，就可以通过放置所需的任意多个按钮来扩展所需的次数。然后在所有按钮之间共享回调。

相关文章：