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

那么你可以一次改变多种风格，你可以清楚地看到发生了什么。

希望有所帮助

jQuery - 改进代码并消除重复

2 个答案: