將事件附加到數組中的對象

Question

我正在創建一個側邊欄，其中包含單擊時用這些顏色填充窗體的顏色色板。它的一個WordPress主題。

每個色樣都是包含在數組中的對象。我在數組上使用了一個.each（）函數來爲每個色板創建HTML，但我也需要創建一種方法，以便單擊色板時，色域填充該色板的顏色。

這裏是小提琴：http://jsfiddle.net/ccnokes/6emfD/ *在代碼中有更多的評論，澄清我在說什麼。

正如您從小提琴中可以看出的，每個色板只填充上一個色板的顏色。 :(

Answer 1

改組它一點點讓你連接單擊事件到每個錨標記，因爲它是創造，而不是之後。

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

添加樣本數據ATTR到每個<a>然後做這樣的事情：

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