jQuery - 改进代码并消除重复

Question

我有一系列对各种jQuery方法的调用,我只是想知道是否有办法清理这些代码,将其转换为我将选择器传入的函数,或者其他任何可以使代码更易于管理的函数/维护.我所拥有的是一长串代码行,如下所示,重复次数很多:

...
$('#boxcolor').on('change', function() {
    $('header').css('background-color', $('#boxcolor').val());
});
$('#color').on('change', function(){
    $('header').css('color',$('#color').val());
});
$('#size').keyup(function() {
    $('header').css('font-size', $('#size').val() + 'px');    
});
...

任何建议都会很棒,谢谢.

Answer 1

只是我的建议:

var header = $('header');

$('#boxcolor').change({
    property: 'background-color'
}, handler );

$('#color').change({
    property: 'color'
}, handler );

$('#size').keyup({
    property: 'font-size',
    unit: 'px'
}, handler );

function handler( e ) {
    header.css( e.data.property, $( this ).val() + ( e.data.unit || "" ) );
}