将 DRY 应用于一组相似的函数

Question

应用 DRY 是我最大的挣扎。谁能帮我创建一个实现与这 4 个函数相同的函数以及如何为每个 .symbol 调用它？

$(".symbol:nth-child(1)").click(function(){
  $("body").removeClass();
  $("body").addClass("gradient1");
})


$(".symbol:nth-child(2)").click(function(){
  $("body").removeClass();
  $("body").addClass("gradient2");
})


$(".symbol:nth-child(3)").click(function(){
  $("body").removeClass();
  $("body").addClass("gradient3");
})


$(".symbol:nth-child(4)").click(function(){
  $("body").removeClass();
  $("body").addClass("gradient4");
})

Answer 1

您可以创建一个采用索引并分配点击处理程序的函数：

function applyNthClick( n ) {
   $(".symbol:nth-child(" + n + ")").click(function(){
     $("body").removeClass();
     $("body").addClass("gradient" + n);
   })
}

然后像这样使用它：

applyNthClick(1);
applyNthClick(2);
applyNthClick(3);
applyNthClick(4);

或者，如果您知道所有 n，您可以将它们组成一个数组，然后将函数映射到它上面：

[1,2,3,4].forEach( applyNthClick );

Answer 2

可以使用整个符号集合中每个元素的索引

var $symbols = $(".symbol").click(function(){
     var symbolIndex = $symbols.index(this);
     $("body").removeClass().addClass("gradient" + (symbolIndex +1) );
 });

参考：index()

将 DRY 应用于一组相似的函数

Applying DRY to a set of similar functions

javascript

jquery

dry