Question

我正在研究Wes Bos的一个项目，您的任务是向一系列列表项中添加Shift Click功能。

我完成了此操作，然后想通过添加取消选择这些列表项的功能来做进一步的工作（请参阅注释的javascript代码）。

然后我想采用该解决方案并应用DRY原理，这就是事情变得困难的地方。


<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Hold Shift to Check Multiple Checkboxes</title>
    </head>
    <body>
        <style>
            html {
              font-family: sans-serif;
              background: #ffc600;
            }
            .inbox {
              max-width: 400px;
              margin: 50px auto;
              background: white;
              border-radius: 5px;
              box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
            }
            .item {
              display: flex;
              align-items: center;
              border-bottom: 1px solid #F1F1F1;
            }
            .item:last-child {
              border-bottom: 0;
            }
            input:checked + p {
              background: #F9F9F9;
              text-decoration: line-through;
            }
            input[type="checkbox"] {
              margin: 20px;
            }
            input:hover {
              cursor: pointer;
            }
            p {
              margin: 0;
              padding: 20px;
              transition: background 0.2s;
              flex: 1;
              font-family:'helvetica neue';
              font-size: 20px;
              font-weight: 200;
              border-left: 1px solid #D1E2FF;
            }
        </style>
        <!--
        The following is a common layout you would see in an email client.

        When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.

        -->
        <div class="inbox">
            <div class="item">
                <input type="checkbox">
                <p>This is an inbox layout.</p>
            </div>
            <div class="item">
                <input type="checkbox">
                <p>Check one item</p>
            </div>
            <div class="item">
                <input type="checkbox">
                <p>Hold down your Shift key</p>
            </div>
            <div class="item">
                <input type="checkbox">
                <p>Check a lower item</p>
            </div>
            <div class="item">
                <input type="checkbox">
                <p>Everything in between should also be set to checked</p>
            </div>
            <div class="item">
                <input type="checkbox">
                <p>Try to do it without any libraries</p>
            </div>
            <div class="item">
                <input type="checkbox">
                <p>Just regular JavaScript</p>
            </div>
            <div class="item">
                <input type="checkbox">
                <p>Good Luck!</p>
            </div>
            <div class="item">
                <input type="checkbox">
                <p>Don't forget to tweet your result!</p>
            </div>
        </div>
        <script>
            const input = document.querySelectorAll('.item input[type="checkbox"]');
            let lastchecked; 

            function checkFunction (event) {
                let inbetween = false;
                if (event.shiftKey && this.checked) {
                    tickBox(true);
                } else if (event.shiftKey && !this.checked) {
                    tickBox(false);
                }
                lastChecked = this;
            }

            function tickBox(boolean) {
                input.forEach(box => { 
                    if (box === this || box === lastChecked) {
                        inbetween = !inbetween;
                    }
                    if (inbetween) {
                        box.checked = boolean;
                    }
                });
            }

            input.forEach(box => box.addEventListener('click', checkFunction));


        //    const input = document.querySelectorAll('.item input[type="checkbox"]');
        //    let lastchecked; 
        //    
        //    function checkFunction (event) {
        //        let inbetween = false;
        //        if (event.shiftKey && this.checked) {
        //            input.forEach(box => {  
        //                if (box === this || box === lastChecked) {
        //                    inbetween = !inbetween;
        //                }
        //                if (inbetween) {
        //                    box.checked = true;
        //                }
        //            });
        //        } else if (event.shiftKey && !this.checked) {
        //            input.forEach(box => {  
        //                if (box === this || box === lastChecked) {
        //                    inbetween = !inbetween;
        //                }
        //                if (inbetween) {
        //                    box.checked = false;
        //                }
        //            });
        //        }
        //        lastChecked = this;
        //    }
        //    
        //    input.forEach(box => box.addEventListener('click', checkFunction));
        </script>
    </body>
</html>

我当时希望我要做的只是调用重复代码的函数，但是这次使用布尔参数，但是它表示inbetween变量未定义。在这一点上，我感到困惑。如果我在新函数中定义它，它只会勾选所有内容，并且不会将变量更改回false等。

我希望这是有道理的。我很想知道我将来会出错。

谢谢。

Answer 1

我建议在tickBox()内声明checkFunction()。这是可行的，因为从未在其他地方调用过它。然后，它可以访问checkFunction()的范围，包括inbetween变量：

const input = document.querySelectorAll('.item input[type="checkbox"]');
let lastchecked; 

function checkFunction (event) {
    let inbetween = false;

    function tickBox(boolean) {
        input.forEach(box => { 
            if (box === this || box === lastChecked) {
                inbetween = !inbetween;
            }
            if (inbetween) {
                box.checked = boolean;
            }
        });
    }

    if (event.shiftKey && this.checked) {
        tickBox(true);
    } else if (event.shiftKey && !this.checked) {
        tickBox(false);
    }
    lastChecked = this;
}

input.forEach(box => box.addEventListener('click', checkFunction));

仅供参考，您可以通过以下方式简化i f/else：

    if (event.shiftKey && this.checked) {
        tickBox(true);
    } else if (event.shiftKey && !this.checked) {
        tickBox(false);
    }

对此：

    if (event.shiftKey) {
        tickBox(this.checked);
    }

这意味着您实际上不再需要tickBox()的单独功能。

调用函数时如何解决函数范围问题

1 个答案: