javascript - jquery点击不同的div并改变颜色并重置另一个div的颜色

Question

我尝试在单击那里更改 div 中的颜色时，其他链接将其颜色重置为原始颜色，直到单击其他 div

I have test for see this, here

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