更清晰的方式來包裝jQuery功能

Question

我正在建立一個品牌編輯屏幕，用jQuery動態預覽你的顏色變化。

我已經設置了一些jQuery函數，如下所示，但需要更多的相同，並想知道是否有更清晰的方式來編寫它以減少重複性。

$('input[name="p-color"]').keyup(function() { 
    var pColor = ($(this).val()); 
    $('.custom-style-demo p').css({"color":pColor}); 
}); 
$('input[name="heading-color"]').keyup(function() { 
    var headingColor = ($(this).val()); 
    $('.custom-style-demo h1, .custom-style-demo h2, .custom-style-demo h3').css({"color":headingColor}); 
}); 

http://codepen.io/rachelreveley/pen/akVkxK?editors=1010

Answer 1

您可以使用一個名爲回調爲您的活動聽衆：

$('input[name="p-color"]').keyup(pColor); 
$('input[name="heading-color"]').keyup(hColor); 

function pColor() { 
    var pColor = ($(this).val()); 
    $('.custom-style-demo p').css({"color":pColor}); 
}; 

function hColor() { 
    var headingColor = ($(this).val()); 
    $('.custom-style-demo h1, .custom-style-demo h2, .custom-style-demo h3').css({"color":headingColor}); 
}; 

然後，你可以用多個事件引用相同的回調。