重构：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

// 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);
       }
   });

我猜页面上每个跨度只有一个实例。如果没有，您可以稍微修改一下以获得行为相同的方式：

// 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 2

你可以这样做：

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

Answer 3

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 4

如果您最终需要维护一长串信息，一种方法是将所有变化的信息放入一个易于维护的变量中：

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

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

您可以使用逗号分隔多个 CSS 选择器：

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