为了账号安全,请及时绑定邮箱和手机立即绑定

为什么偶数行没有被赋予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>


正在回答

2 回答

css样式加载顺序导致的,把h类的样式写在c类样式就有了,反之一样的

0 回复 有任何疑惑可以回复我~

http://img1.sycdn.imooc.com//5def0b350001a29105520514.jpghttp://img1.sycdn.imooc.com//5def0b3f000105e407740321.jpg不知道你说的是不是这个意思,我这里注释了$("#table tr").toggleClass("c");显示是没有问题的

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么偶数行没有被赋予h类的样式 ,而先$("#table tr").toggleClass("h");之后再$("#table tr:odd").toggleClass("c");就有反应 求解释

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信