Attacher un événement aux objets du tableau

Question

Je travaille à la création d'une barre latérale contenant des échantillons de couleurs qui, une fois cliqués, remplissent un formulaire avec ces couleurs. C'est pour un thème Wordpress.

Chacun des échantillons de couleurs est un objet contenu dans un tableau. J'utilise une fonction .each() sur le tableau pour créer le code HTML de chaque échantillon, mais j'ai également besoin de créer un moyen de sorte que quand un échantillon est cliqué, les champs de couleur se remplissent avec les couleurs de cet échantillon.

Voici le violon: http://jsfiddle.net/ccnokes/6emfD/ * il y a plus de commentaires dans le code qui clarifient de quoi je parle.

Comme vous pouvez le voir à partir du violon, chaque échantillon remplit uniquement les champs avec les couleurs du dernier échantillon. :(

Answer 1

Réorganiser un peu afin que vous attachez l'événement click à chaque balise d'ancrage comme il est créé plutôt qu'après.

http://jsfiddle.net/6emfD/2/

//Color Swatches JS 
//color swatch array containing objects that contain the target fields and colors 
var swatches = [ 
    $fuego = { 
    name: 'fuego', 
    primary_color: '#c0342a', 
    primary_hover_color: '#a0140a', 
    primary_hover_color_2: '#800000', 
    secondary_color: '#ff7600', 
    secondary_hover_color: '#df5600', 
    secondary_hover_color_2: '#bf3600', 
    tertiary_color: '#ffd005', 
    tertiary_color2: '#ffd409', 
    h1_color: '#c0342a', 
    h2_color: '#a0140a', 
    background_color: '#ffd005'}, 
    $veggies = { 
    name: 'veggies', 
    primary_color: '#5f8a42', 
    primary_hover_color: '#86ad59', 
    primary_hover_color_2: '#f6faa1', 
    secondary_color: '#f28410', 
    secondary_hover_color: '#d66011', 
    secondary_hover_color_2: '#b24400', 
    tertiary_color: '#a44a0e', 
    tertiary_color2: '#a84e0f', 
    background_color: '#a44a0e'}, 
    $jazz = { 
    name: 'jazz', 
    primary_color: '#3b2e8c', 
    primary_hover_color: '#022859', 
    primary_hover_color_2: '#023059', 
    secondary_color: '#6cafd9', 
    secondary_hover_color: '#4c8fb9', 
    secondary_hover_color_2: '#2c6f99', 
    tertiary_color: '#ffffff', 
    tertiary_color2: '#fcfcfc', 
    background_color: '#ffffff'} 
]; 

//Create color swatches HTML 
$(swatches).each(function() { 
    var $swatch = this; 
    $('<a id="' + this.name + '"><ul class="swatch"><li class="main" style="background-color:' + this.primary_color + '"></li><li style="background-color:' + this.primary_hover_color + '"></li><li style="background-color:' + this.primary_hover_color_2 + '"></li><li class="main" style="background-color:' + this.secondary_color + '"></li><li style="background-color:' + this.secondary_hover_color + '"></li><li style="background-color:' + this.secondary_hover_color_2 + '"></li></ul></a>').on('click', function() { 
     fillSwatches($swatch); 
     console.log($swatch); 
    }).appendTo('.swatch-wrap'); 

}); 

//on swatch click, fill fields with corresponding colors  


function fillSwatches($swatch) { 
    $.each($swatch, function($key, $value) { 
     fillColor($key, $value); 
    }); 
} 

//fill color scheme 


function fillColor($field, $color) { 
    $('#' + $field).val($color).css("background-color", $color).change(); 
} 

/*the following function works but can't it be abstracted so that every swatch doesn't have to be written out in this format? */ 

/* 
$('#fuego').on('click', function(){ 
    fillSwatches($fuego); 
}); 
*/​ 

Answer 2

Ajouter un swatch données attr à chaque <a> puis faire quelque chose comme ceci:

$('a').on('click', function(){ 
    var swatch = swatches[$(this).data('swatch')]; 
    fillSwatches(swatch); 
});