Question

I am working on somethign where I have two input fields, one for a primary color and one for a secondary color. I am using JSColor so when you click on the input box a color picker comes up, and when you change the color, the background of the input changes to that color.

Well I want to have another feature where I can have some “premade” colors that someone can choose form. So here is what I have:

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

and so forth. And the jQuery I have is:

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

Which works perfect. Well for themeTwo I would have to duplicate that whole code and manually enter in new hex colors that I want for theme two.

I might have 5 or 6 themes to choose from so that could get very long. I was wondering if anyone could help me improve on the code if there is an easier way to do that and shorter and more flexible for when I want to add more themes?

Thank you!

Answer 1

Why not simply associate data with the button you are clicking?

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

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

You can then extend as many times as you need by placing however many buttons you need as long as you set the attributes on each button appropriately. You then share the callback among all buttons.