Verwirrung durch Javascript-Funktion „Alle auswählen“

Question

Laden Sie den Code direkt hoch
Der Code lautet wie folgt, die Funktion „Alles auswählen“ ist nicht einfach zu verwenden

     var _select_all = document.getElementById("select_all");
     var _input = document.querySelectorAll("#shop_content ul input[type=checkbox]");
    _select_all.addEventListener("click",function() {
        
                            
            for(var i = 0;i<_input.length;i++) {
                 _input[i].checked="checked";
        }
     })

Ändern Sie einen Satz

var _select_all = document.getElementById("select_all");
    
    _select_all.addEventListener("click",function() {
         var _input = document.querySelectorAll("#shop_content ul input[type=checkbox]");
                            
            for(var i = 0;i<_input.length;i++) {
                 _input[i].checked="checked";
        }
     })

Warum wird der Code normal ausgeführt, wenn _input unten platziert wird? Können wir in der Rückruffunktion keine externen Variablen entsprechend dem Umfang abrufen?

Answer 1

亲测两种都可以啊：https://jsfiddle.net/8j9q69qm/

Answer 2

测试了一下，这两种都是可以的

Answer 3

不会的,都一样的

Answer 4

var _select_all = document.getElementById("select_all");
var _input = document.querySelectorAll("#shop_content ul input[type=checkbox]");
console.log(_input);
_select_all.addEventListener("click",function() {
    
                        
        for(var i = 0;i<_input.length;i++) {
             _input[i].checked="checked";
    }
 })

log出来看看就知道了，如果是undefined的话就知道问题出在那了。

Answer 5

一个是事先查好节点缓存起来，一个是点击的时候实时去查节点。如果 #shop_content ul input[type=checkbox] 这个选择器对应的节点不会变化的话两种方法是一样的，而且缓存的效率比较高。如果对应节点可能删除、增加或更换，必须使用第二种方法，每次点击的时候实时去查找节点