Question

我正在处理一个简单的jQuery脚本，它在单击时更改元素的背景颜色。

这是我的代码：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<div class="radio">Text1</div>
<div class="radio">Text2</div>
<div class="radio">Text3</div>
<div class="radio">Text4</div>

我希望发生以下情况：

我点击＆＃34; Text1＆＃34;而这个div正在将他的背景颜色改为红色并保持红色。

我点击＆＃34; Text2＆＃34;和＃34; Text1＆＃34;的背景颜色;回到白色然后是＆＃34; Text2＆＃34;的背景颜色。要走了，保持红色。

我希望我能给你一个很好的描述。

你能帮帮我吗？

提前致谢！

Answer 1

$('.radio').click(function(){
  $('.red').removeClass('red');
  $(this).addClass('red');
});

.red{
background-color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="radio">Text1</div>
<div class="radio">Text2</div>
<div class="radio">Text3</div>
<div class="radio">Text4</div>

Answer 2

以下是使用纯CSS执行此操作的方法：

input {
  display: none;
}
label {
  display: block;
}
input:checked + label {
  background-color: red;
}

<input id="text1" type="radio" name="g1">
<label for="text1">Text1</label>
<input id="text2" type="radio" name="g1">
<label for="text2">Text2</label>
<input id="text3" type="radio" name="g1">
<label for="text3">Text3</label>
<input id="text4" type="radio" name="g1">
<label for="text4">Text4</label>

jQuery - 从具有相同类标识的许多元素更改一个元素的CSS

2 个答案: