javascript - 单击 jQuery 中的文本时如何允许单个更改 css 样式？

Question

我有很多绿色字符串: 样式.css:

.green_text {
  color: green;
  font-family: 'Arial';
  font-size: 20px;
  font-weight: bold;

}
.green_text:hover {
  cursor: pointer;
}

index.html:

<span class="green_text">text 1</span><br>
<span class="green_text">text 2</span><br>
<span class="green_text">text 3</span><br>
<span class="green_text">text 4</span><br>
<span class="green_text">text 5</span><br>
<span class="green_text">text 6</span><br>
<span class="green_text">text 7</span><br>
<span class="green_text">text 8</span><br>

脚本.js:

$(document).ready(function(){
$(".green_text").click(function(){
    $(this).css("color","red");
})
})

我希望当我单击文本 1 时颜色变为红色，但是当我单击文本 2 时只有文本 2 的颜色为红色而文本 1 为绿色。我怎样才能用很多字符串做到这一点。

Answer 1

单击时将所有元素的颜色设置为绿色，然后仅将单击的元素的颜色更改为红色。

$(document).ready(function(){
  $(".green_text").click(function(){
      $(".green_text").css("color","green");
      $(this).css("color","red");
  })
})

.green_text {
  color: green;
  font-family: 'Arial';
  font-size: 20px;
  font-weight: bold;

}
.green_text:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="green_text">text 1</span><br>
<span class="green_text">text 2</span><br>
<span class="green_text">text 3</span><br>
<span class="green_text">text 4</span><br>
<span class="green_text">text 5</span><br>
<span class="green_text">text 6</span><br>
<span class="green_text">text 7</span><br>
<span class="green_text">text 8</span><br>