Estoy trabajando en algo donde tengo dos campos de entrada, uno para un color primario y otro para un color secundario. Estoy usando JSColor , por lo que cuando haces clic en el cuadro de entrada, aparece un selector de color y cuando cambia el color, el fondo de la entrada cambia a ese color.

Bueno, quiero tener otra característica en la que pueda tener algunos colores "prefabricados" que alguien pueda elegir. Así que esto es lo que tengo:

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

Etcétera. Y el jQuery que tengo es:

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

Que funciona perfecto. Bueno, para themeTwo tendría que duplicar todo el código e ingresar manualmente los nuevos colores hexadecimales que quiero para el tema dos.

Podría tener 5 o 6 temas para elegir, por lo que podría ser muy largo. Me preguntaba si alguien podría ayudarme a mejorar el código si hay una manera más fácil de hacerlo y más corta y flexible para cuando quiera agregar más temas.

¡Gracias!

1
Drew 13 dic. 2011 a las 23:26

1 respuesta

La mejor respuesta

¿Por qué no simplemente asociar datos con el botón en el que está haciendo clic?

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

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

A continuación, puede ampliar tantas veces como necesite colocando todos los botones que necesite, siempre que establezca los atributos de cada botón de forma adecuada. Luego comparte la devolución de llamada entre todos los botones.

3
Tejs 13 dic. 2011 a las 23:31
¡¡¡Guau!!! eso funcionaría perfecto. Sigo olvidando que puedo poner datos personalizados en mis elementos. Gracias :)
 – 
Drew
13 dic. 2011 a las 23:36