jquery单击不同的div并更改颜色并重置其他div颜色

Question

我尝试在div 中单击更改颜色，并且其他链接将他的颜色重置为原始颜色，如果直到单击其他div

我有测试看到这个，在这里

.content {
position: relative;
width: 400px;
height: 35px;
line-height: 35px;
margin-top: 7px;
margin-bottom: 7px;
border: 1px solid;
cursor: pointer;
cursor: hand;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content n1" style="background-color:pink;" onclick="$(this).css('background-color','green');">Number 1</div>
<div class="content n1" style="background-color:blue;" onclick="$(this).css('background-color','green');">Number 2</div>
<div class="content n1" style="background-color:orange;" onclick="$(this).css('background-color','green');">Number 3</div>
<div class="content n1" style="background-color:brown;" onclick="$(this).css('background-color','green');">Number 4</div>

如果您可以看到测试链接，当我单击将每个div更改为绿色时，每次单击的想法只会更改我单击的div的颜色，并将颜色重置为其他div的原始背景颜色

我不知道我能做到这一点，如果你能帮助我完善，谢谢，问候

Answer 1

一种选择是添加一个具有绿色背景的类(在本例中，类是.greenClass(。单击后，删除所有.content上的类.greenClass，并仅在单击的元素上添加类。

$(".content").click(function() {
$(".content").removeClass('greenClass');
$(this).addClass('greenClass');
});

.content {
position: relative;
width: 400px;
height: 35px;
line-height: 35px;
margin-top: 7px;
margin-bottom: 7px;
border: 1px solid;
cursor: pointer;
cursor: hand;
}
.greenClass {
background-color: green!IMPORTANT;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content n1" style="background-color:pink;">Number 1</div>
<div class="content n1" style="background-color:blue;">Number 2</div>
<div class="content n1" style="background-color:orange;">Number 3</div>
<div class="content n1" style="background-color:brown;">Number 4</div>