jQuery - コードを繰り返さないスマートなアイデアですか？

Question

だから私は、コードを持っている：

$(".redd").click(function() { 
    fillcolor = $(".redd").css("background-color"); 
}); 
$(".pink").click(function() { 
    fillcolor = $(".pink").css("background-color"); 
}); 
$(".purple").click(function() { 
    fillcolor = $(".purple").css("background-color"); 
}); 
$(".indigo").click(function() { 
    fillcolor = $(".indigo").css("background-color"); 
}); 
$(".cyan").click(function() { 
    fillcolor = $(".cyan").css("background-color"); 
}); 
$(".blue").click(function() { 
    fillcolor = $(".blue").css("background-color"); 
}); 
$(".yellow").click(function() { 
    fillcolor = $(".yellow").css("background-color"); 
}); 
$(".green").click(function() { 
    fillcolor = $(".green").css("background-color"); 
}); 
$(".orange").click(function() { 
    fillcolor = $(".orange").css("background-color"); 
}); 
$(".black").click(function() { 
    fillcolor = $(".black").css("background-color"); 
}); 

このコードは何をしますか？ たとえば$（ "。redd"）はボタンで、クリックすると変数 'fillcolor'がボタンの背景色に変更されます。 このコードをもっとスマートに書くには？

Answer 1

は彼らに共通するクラスを与え、これは私のアプローチです

$(".color").click(function() { 
 
    fillcolor = $(this).css("background-color"); 
 
    console.log(fillcolor); 
 
}); 
 
    
 

.green { 
 
    background-color: green 
 
} 
 

 
.blue { 
 
    background-color: blue 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" class="green color" value="green" /> 
 
<input type="button" class="blue color" value="blue" />

Answer 2

上でクリックされたものを取得するには$（this）を使用し、提案を追加してみましょう！

var arry = [".redd", ".pink", ...] 
for (var i = 0; i < arry.length; i++) 
{ 

    $(arry[i]).click(function() { 
    fillcolor = $(".purple").css("background-color"); 
}) 
}