我对各种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');    
});
...

任何建议都很好，谢谢。

===============>>#1 票数：5

只是我的建议： 

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

===============>>#2 票数：0

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

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

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

希望能帮助到你

  ask by noclist translate from so

未解决问题？本站智能推荐：