更简洁的方式来包装 jquery 函数答案

【问题标题】：Cleaner way to wrap up jquery functions更简洁的方式来包装 jquery 函数
【发布时间】：2016-07-12 10:06:05
【问题描述】：

我正在构建一个带有 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

【问题讨论】：

CodeReview 可能是一个更好的地方......但请先查看他们的指南。
以前没见过。谢谢。

标签： jquery css function

【解决方案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});
};

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

【讨论】：