更清洁的方式来包装jquery函数

Question

我正在构建一个品牌编辑屏幕，其中包含jQuery驱动的颜色变化预览。

我已经设置了一些jQuery函数，但需要更多相同的函数，并且想知道是否有更简洁的方法来编写它以减少重复性。

{{1}}

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

然后您可以使用多个事件引用相同的回调。