闭包示例

最新推荐文章于 2024-09-17 22:59:44 发布
杰克2022
最新推荐文章于 2024-09-17 22:59:44 发布
阅读量41
点赞数
文章标签： css 前端 html javascript css3
本文链接：https://blog.csdn.net/wyh0318/article/details/128481207
版权
<!doctype html>
<html lang='en'>

<head>
    <title>闭包示例</title>
    <style>
        .table-normal {
            width: 80%;
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        .table-normal th,
        .table-normal td {
            padding: 8px;
            border: 1px solid #ccc;
            text-align: left;
        }

        .outBox .checkbox {
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            display: inline-block;
            margin-right: 10px;
            cursor: pointer;
        }

        .outBox .checkbox.ok {
            background: url('./images/apply_check_ok_yes_128px_2293_easyicon.net.png') center center no-repeat;
            background-size: 80%;
        }

        .outBox .checkbox.no {
            background: url('./images/close_802px_1161619_easyicon.net.png') center center no-repeat;
            background-size: 80%;
        }
    </style>

</head>
<!-- https://www.easyicon.net -->

<!-- 作业要求： -->
<!-- 1. 尽量用原生的方式， 
2. 不用要let块级作用域 -->

<!-- 提示：我在每个checkbox都加了一个ok样式名， 代表打钩 ， 
no代表打叉， 供参考，上面样式 -->

<!-- 作业需求 -->
<!-- 1. 点击每个checkbox， 第一次是打勾， 第二次打叉 ， 第三次恢复原来的不选状态
2. 每个checkbox的状态不能相互受影响
3. 点击发送按钮，把获取到的状态 以数组的形式 打印出来 -->

<body>
    <div class="outBox">
        <table class="table-normal">

            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>状态</th>
            </tr>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>10</td>
                <td><span class="checkbox"></span></td>
            </tr>
            <tr>
                <td>小刚</td>
                <td>男</td>
                <td>10</td>
                <td><span class="checkbox"></span></td>
            </tr>
            <tr>
                <td>小红</td>
                <td>男</td>
                <td>10</td>
                <td><span class="checkbox"></span></td>
            </tr>
            <tr>
                <td>小沙</td>
                <td>男</td>
                <td>10</td>
                <td><span class="checkbox"></span></td>
            </tr>

            <tr>
                <td>小杨</td>
                <td>男</td>
                <td>10</td>
                <td><span class="checkbox"></span></td>
            </tr>

            <tr>
                <td>小松</td>
                <td>男</td>
                <td>10</td>
                <td><span class="checkbox"></span></td>
            </tr>
        </table>

        <!-- <span class="checkbox"></span>
        <span class="checkbox"></span>
        <span class="checkbox"></span>
        <span class="checkbox"></span> -->
    </div>

    <button type="button" id="btnSend">发送</button>
    <script>
        for (var checkboxSpan of document.querySelectorAll('.outBox>.table-normal .checkbox')) {
            // debugger;
            console.log(checkboxSpan);
            (function (checkboxElement) {
                var clickCounter = 0,
                    maxState = 3;

                checkboxElement.onclick = function (e) {
                    clickCounter++;
                    clickCounter = clickCounter % maxState;
                    // debugger;
                    switch (clickCounter) {
                        case 0:
                            e.target.classList.remove('ok')
                            e.target.classList.remove('no');
                            break;
                        case 1:
                            e.target.classList.add('ok')
                            e.target.classList.remove('no');
                            break;
                        case 2:
                            e.target.classList.remove('ok')
                            e.target.classList.add('no');
                            break;
                        default:
                            break;
                    }
                }
            })(checkboxSpan);
        }

        document.getElementById('btnSend').onclick = function (e) {
            var states = [];
            var statesForString = [];
            var stateDictionary = {
                0: "normal",
                1: "ok",
                2: "no"
            };

            for (var checkboxSpan of document.querySelectorAll('.outBox>.table-normal .checkbox')) {
                var state = 0;
                if (checkboxSpan.classList.contains('ok')) {
                    state = 1;
                } else if (checkboxSpan.classList.contains('no')) {
                    state = 2;
                }

                states.push(state);
                statesForString.push(stateDictionary[state]);
            }

            console.log("当前状态： ", states, statesForString);
        }
    </script>
</body>

</html>