リファクタリング：Javascriptがこのコードをリファクタリングいくつかの助けが必要

Question

をブロック：

$("span[rel=color_content]").ColorPicker({ 
    onChange: function (hsb, hex, rg) { 
    $("span[rel=color_content]").css('background-color', '#' + hex); 
    } 
}); 
$("span[rel=color_link]").ColorPicker({ 
    onChange: function (hsb, hex, rg) { 
    $("span[rel=color_link]").css('background-color', '#' + hex); 
    } 
}); 
$("span[rel=color_selected]").ColorPicker({ 
    onChange: function (hsb, hex, rg) { 
    $("span[rel=color_selected]").css('background-color', '#' + hex); 
    } 
}); 
$("span[rel=color_page]").ColorPicker({ 
    onChange: function (hsb, hex, rg) { 
    $("span[rel=color_page]").css('background-color', '#' + hex); 
    } 
}); 
$("span[rel=color_player]").ColorPicker({ 
    onChange: function (hsb, hex, rg) { 
    $("span[rel=color_player]").css('background-color', '#' + hex); 
    } 
}); 

それぞれの間で変化する唯一のことは、rel属性の内容です。

Answer 1

：

function setColorPicker(css_selector) { 
    $(css_selector).ColorPicker({ 
     onChange: function (hsb, hex, rg) { 
     $(css_selector).css('background-color', '#' + hex); 
     } 
    }); 
} 

Answer 2

// Newlines added for readability 
$('span[rel=color_content], 
    span[rel=color_link], 
    span[rel=color_selected], 
    span[rel=color_page], 
    span[rel=color_player]').ColorPicker({ 
     onChange: function(hsb, hex, rg){ 
      $(this).css('background-color', '#' + hex); 
     } 
    }); 

私は、ページに各スパンのインスタンスが1つしかないと推測しています。ない場合は、同じように動作し、何かを得るために、わずかにこれを変更することができます：あなたが何か行うことができ

// Newlines added for readability 
$('span[rel=color_content], 
    span[rel=color_link], 
    span[rel=color_selected], 
    span[rel=color_page], 
    span[rel=color_player]').ColorPicker({ 
     onChange: function(hsb, hex, rg){ 
      $('span[rel='+$(this).attr('rel')+']') 
       .css('background-color', '#' + hex); 
     } 
    }); 

Answer 3

をカンマを使用して、いくつかのCSSセレクタを分離することができます：

$("span[rel=color_player], span[rel=color_page]").ColorPicker(); 

Answer 4

for(i in ['content','link','selected','page','player']) 
{ 
    $("span[rel=color_"+i+"]").ColorPicker({ 
    onChange: function (hsb, hex, rg) {$("span[rel=color_"+i+"]").css('background-color', '#' + hex); } }); 
} 

Answer 5

var arr = [ 
    'color_content', 
    'color_link', 
    'color_selected', 
    'color_page', 
    'color_player' 
]; 

---

function foo() { 
    var i, selector; 

    for (i = 0; i < arr.length; i++) { 
     selector = 'span[rel=' + arr[i] + ']'; 

     $(selector).ColorPicker({ 
      onChange: function (hsb, hex, rg) { 
       $(selector).css('background-color', '#' + hex); 
      } 
     }); 
    } 
} 

Answer 6

あなたが維持するために、これらの本当に長いリストで終わる場合は、一つの方法は、1やすく、保守し、変数内のすべての変更の情報を置くことです：

var rels = ['color_content','color_link','color_selected','color_page']; 

次にあなたが持っている可能性があり：

を

// build the selectors according to your patterh 
var selectors = $.map(rels, function(e,i){ 
    return 'span[rel=' + rels + ']'; 
}).join(','); 

$(selectors).ColorPicker({ 
    onChange: function(hsb,hex,rg){ 
    $(this).css('background-color','#'+hex); 
});