Wide_Wolf
2017-05-25 16:29
采纳率: 100%
浏览 4.1k
已采纳

问个很白痴的问题,为什么函数不能写在FOR循环里面

源代码:

var checkbox = document.getElementsByTagName('input');
var all = document.getElementById('all');
var none = document.getElementById('none');
var dis = document.getElementById('dis');
var attr = [];
for(var i = 0; i < checkbox.length; i++) {
    if(checkbox[i].type == 'checkbox') {
        attr.push(checkbox[i]);
    }
}
all.onclick = function() {
    for(var j = 0; j < attr.length; j++) {
        attr[j].checked=true;
    }
}
none.onclick = function(){
    for(var j = 0; j < attr.length; j++) {
        attr[j].checked=false;
    }
}
dis.onclick = function(){
    for(var j = 0; j < attr.length; j++) {
        attr[j].checked= !attr[j].checked;
    }
}

两个问题:
函数为什么不能写在FOR循环里面;
是否可以简化代码

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

8条回答 默认 最新

  • miaoch 2017-05-26 00:58
    已采纳

    然后我重新想了一下,好像也是可以的,不过我没有测试

     var checkbox = document.getElementsByTagName('input');
            var all = document.getElementById('all');
            var none = document.getElementById('none');
            var dis = document.getElementById('dis');
            var attr = [];
            for(var i = 0; i < checkbox.length; i++) {
                if(checkbox[i].type == 'checkbox') {
                    attr.push(checkbox[i]);
                    all.addEventListener("click", function () {
                        checkbox[i].checked=true;//这个checkbox[i]这么写不是很安全
                    });
                    ...
                    ...
                }
            }
    
    已采纳该答案
    打赏 评论
  • usecf 2017-05-26 00:40

    可以呀 为什么不能
    你把for循环里面的操作 放到一个函数里面, 然后自己再for里面调用就行了

    打赏 评论
  • miaoch 2017-05-26 00:47

    第一个循环是获得input中type为checkbox的元素,这个阶段只会执行一次,保存在一个数组中。
    在这个阶段你还不知道用户会点击什么按钮,自然不能直接设置它的checked属性。

    后面几个按钮的事件都是在按钮点击后才会执行。里面的循环是为了遍历刚才设置好的数组的。
    这里的函数只要你点击了就可以执行,执行几次都没有问题。

    所以你的第一个问题自然是做不到的,因为这样的逻辑很好啊:
    1、获得checkbox数组
    2、设置点击事件,遍历数组修改checked属性

    如果你说要把函数写在for循环里面。
    难道在获得数组的过程中就知道如何设置checked属性了吗。

    第二个问题,你说的简化代码我觉得是做不到的。首先点击事件肯定是要为数组设置checked属性。
    也许可以省略第一个获得“checkbox数组”行为,你在每次点击的时候重新获得checkbox数组

    for(var i = 0; i < checkbox.length; i++) {
        if(checkbox[i].type == 'checkbox') {
            attr[j].checked= !attr[j].checked;
        }
    }
    

    不过这样好像也不算简化,效率也降低了

    打赏 评论
  • miaoch 2017-05-26 01:02
                    all.addEventListener("click", (function(node) {
                                return function () {
                                    node.checked=true;
                                }
                            } )(checkbox[i]));
    
    打赏 评论
  • 
        var all = document.getElementById('all');
        var none = document.getElementById('none');
        var dis = document.getElementById('dis');
    
    
        //////////
        var checkbox = document.getElementsByTagName('input');
        var attr = [];
        for (var i = 0; i < checkbox.length; i++) {
            if (checkbox[i].type == 'checkbox') {
                attr.push(checkbox[i]);
            }
        }
        ////////////
        //如果不考虑兼容IE8-,上面//中间的代码可以用下面一句搞定
        //// var attr =document.querySelectorAll('[type=checkbox]')
    
    
        all.onclick = none.onclick = dis.onclick = function () {
            for (var j = 0; j < attr.length; j++) {
                attr[j].checked = this.id == 'all' ? true : this.id == 'none' ? false : !attr[j].checked;
            }
        }
    
    打赏 评论
  • Wide_Wolf 2017-05-26 08:31

    感谢大家,经过大佬指导,代码改成如下图,不清楚效率,反正行数少了。哈哈哈图片图片

    打赏 评论
  • Tristan.L 2017-06-13 15:27

    函数调用是可以写的,在函数中访问外部变量有点时候会有作用域的问题

    打赏 评论
  • jaramyZXG 2017-06-20 04:45

    需要看情况是否把循环放到函数里。一般都是在方法里循环,以实现某个效果

    打赏 评论