javascript - 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

给他们一个公共(public)类并使用 $(this) 来获取被点击的类

$(".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" />