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应用于一组类似的功能

2 个答案: