为什么偶数行没有被赋予h类的样式 ，而先$("#table tr").toggleClass("h");之后再$("#table tr:odd").toggleClass("c");就有反应 求解释
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>隔行换色</title>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
body,
table,
td,
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.h {
background: #0F0;
color: #F3F;
}
.c {
background: red;
color: #000;
}
</style>
</head>
<body>
<h4>.toggleClass(className)和.toggleClass(className,switch)</h4>
<table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
<tr>
<td>慕课jQuery入门</td>
<td>慕课jQuery入门</td>
</tr>
<tr>
<td>慕课jQuery入门</td>
<td>慕课jQuery入门</td>
</tr>
<tr>
<td>慕课jQuery入门</td>
<td>慕课jQuery入门</td>
</tr>
<tr>
<td>慕课jQuery入门</td>
<td>慕课jQuery入门</td>
</tr>
<tr>
<td>慕课jQuery入门</td>
<td>慕课jQuery入门</td>
</tr>
</table>
<script type="text/javascript">
//给所有的tr元素加一个class="c"的样式
$("#table tr").toggleClass("c");
</script>
<script type="text/javascript">
//给所有的偶数tr元素切换class="c"的样式
//所有基数的样式保留，偶数的被删除
$("#table tr:odd").toggleClass("h");
</script>
<script type="text/javascript">
//第二个参数判断样式类是否应该被添加或删除
//true，那么这个样式类将被添加;
//false，那么这个样式类将被移除
//所有的奇数tr元素，应该都保留class="c"样式
//$("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的
</script>
</body>
</html>
个回答
-
- 慕用342670
- 2021-09-27 19:41:37
css样式加载顺序导致的，把h类的样式写在c类样式就有了,反之一样的
-
- weixin_慕圣5109373
- 2019-12-10 11:05:13
不知道你说的是不是这个意思，我这里注释了$("#table tr").toggleClass("c");显示是没有问题的