0
我试图做一个颜色切换器，其中一个div的颜色根据您点击的颜色的圆圈而改变。我有9种不同颜色的类“色圈”的div，我该如何做到这一点，以便当点击div时它会返回特定的“背景”值？如何使用jquery返回单击的div类的css属性？
我试过使用“this”但它不工作，有没有办法做到这一点，而不必写每个div的点击功能？
感谢
$(".color-circle").click(function(){
$("#color-cont").css("background-color", $(this).css("background"));
})#colorPicker {
width: 100%;
height: 50px;
margin-top: 10px;
border: 1px solid #ccc;
\t border-radius: 3px;
display: inline-flex;
justify-content: center;
}
.color-circle {
border: 1px solid #ccc;
\t border-radius: 50%;
width: 40px;
height: 40px;
margin: auto;
}
.color-circle:nth-of-type(1) {
background: #DDC79B;
}
.color-circle:nth-of-type(2) {
background: #C7DD9B;
}
.color-circle:nth-of-type(3) {
background: #9BDD9B;
}
.color-circle:nth-of-type(4) {
background: #9BDDC7;
}
.color-circle:nth-of-type(5) {
background: #9BC7DD;
}
.color-circle:nth-of-type(6) {
background: #9B9BDD;
}
.color-circle:nth-of-type(7) {
background: #C79BDD;
}
.color-circle:nth-of-type(8) {
background: #DD9BC7;
}
.color-circle:nth-of-type(9) {
background: #DD9B9B;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="color-cont">
<h3>Choose the theme color for your profile</h3>
<div id="colorPicker">
<div class="color-circle"></div>
<div class="color-circle"></div>
<div class="color-circle"></div>
<div class="color-circle"></div>
<div class="color-circle"></div>
<div class="color-circle"></div>
<div class="color-circle"></div>
<div class="color-circle"></div>
<div class="color-circle"></div>
</div>
</div>
'背景color'和'background'不匹配。选一个。 – epascarello