更改未选中的文本的颜色

Question

我有8个测试divs。我想要的是，当我单击它们中的每一个时，我想将其边框颜色更改为红色，但是在我选择第五次之后，我希望所有未选择的盒子都将其文本颜色更改为蓝色。我该如何实现？当前，只有第一个没有选定的DIV文本正在更改。提前致谢。

这是为了容纳空间.................................................................................................................................................................................................... ........

let testArray = []

$('.test').on('click', function() {
  if (testArray.length < 4) {
    testArray.push($(this).find('p').html())
    $(this).prop('id', 'selected')
  } else if (testArray.length == 4) {
    testArray.push($(this).find('p').html())
    $(this).prop('id', 'selected')
    console.log(testArray)
    //change all text color inside the test boxes that don't have red border
    $('#notSelected').each(function() {
      $(this).find('p').css('color', 'blue')
    });
  }
})

body {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.test {
  display: flex;
  width: 100px;
  height: 100px;
  border: 2px solid transparent;
  background-color: #000000;
  margin-left: 2%;
}

#selected {
  border: 2px solid red;
}

.test:hover {
  border: 2px solid green;
}

.test p {
  color: #ffffff;
  margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="test" id="notSelected">
  <p>test1</p>
</div>

<div class="test" id="notSelected">
  <p>test2</p>
</div>

<div class="test" id="notSelected">
  <p>test3</p>
</div>

<div class="test" id="notSelected">
  <p>test4</p>
</div>

<div class="test" id="notSelected">
  <p>test5</p>
</div>

<div class="test" id="notSelected">
  <p>test6</p>
</div>

<div class="test" id="notSelected">
  <p>test7</p>
</div>

<div class="test" id="notSelected">
  <p>test8</p>
</div>

Answer 1

假设您使用.Red和.blue具有相应边框颜色的类，则应在没有红色的地方添加蓝色：

$(".test:not(.red)").addClass("blue")