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

Answer 2

我看不到很多可以重构的东西，但是，如果始终选择标题，则可以执行以下操作：

var changeHeaderStyles = function() {
   var header = $('header');
   //use a clousure here to only get the header once
   return function(cssObject) {
       $header.css(cssObject);
   }
}(); 

//Then..
$('#size').keyup(function() {
    changeHeaderStyles({ 'font-size': $('#size').val() + 'px' });    
});

因此，您可以一次更改多种样式，并且可以清楚地了解正在发生的事情。

希望能帮助到你