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

，那么你可以改变不止一个风格比较突然，你可以清楚地看到发生了什么。

希望它可以帮助

Answer 2

只是我的建议：

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