Question

我有很多绿色字符串： style.css中：

ID  |  YEAR  | SCORE
--------------------
177 | 2008   | 14
--------------------
177 | 2011   | 16

的index.html：

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

}
.green_text:hover {
  cursor: pointer;
}

的script.js：

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

我想当我点击text1时颜色变为红色但是当我点击text2时，只有text2的颜色为红色，而文本1为绿色。我怎么能用很多字符串来做到这一点。

Answer 1

点击将所有元素的颜色设置为green，然后仅将点击元素的颜色更改为red。

$(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>

Answer 2

首先，我强烈建议在JS代码中设置css()来添加/删除一个类。从那里，您可以使用siblings().removeClass()来做您需要的事情。另请注意，在pointer状态设置:hover是多余的。只需将其直接放入.green_text课程即可。试试这个：

＆＃13;

$(document).ready(function() {
  $(".green_text").click(function() {
    $(this).addClass('active').siblings().removeClass('active');
  })
})

＆＃13;

.green_text {
  color: green;
  font: bold 20px Arial;
  cursor: pointer;
}
.green_text.active { color: red; }

＆＃13;

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

＆＃13;

Answer 3

我想当我点击text1时颜色变为红色但是当我点击text2时，只有text2的颜色为红色，而文本1为绿色。

您可以先将剩余部分变为绿色。

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

Answer 4

点击其他.green_txt的{{1}}更改css，当前添加颜色红色

green

以下是工作代码段。

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

$(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;
}

如何在单击jQuery中的文本时单独更改css样式？

4 个答案: