2

私は、クリックするとフォームにそれらの色を入力する色見本を含むサイドバーの作成に取り組んでいます。Wordpressのテーマです。

各色見本は、配列に含まれるオブジェクトです。配列に対して.each（）関数を使用して、各スウォッチのHTMLを作成しますが、スウォッチがクリックされたときにカラーフィールドがそのスウォッチの色で塗りつぶされるようにする方法も作成する必要があります。

フィドルは次のとおりです。http：//jsfiddle.net/ccnokes/6emfD/ *コードには、私が話していることを明確にするコメントがさらにあります。

フィドルからわかるように、各見本は最後の見本の色でのみフィールドを塗りつぶします。:(

4

2 に答える 2

0

クリックイベントを作成後ではなく作成時に各アンカータグに添付するように、少し再編成します。

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);
});
*/​
于 2012-09-12T19:01:15.720 に答える
0

それぞれに見本data-attrを追加してから<a>、次のようにします。

$('a').on('click', function(){
    var swatch = swatches[$(this).data('swatch')];  
    fillSwatches(swatch);
});
于 2012-09-12T19:02:07.617 に答える