Confusion causée par javascript, sélectionnez toutes les fonctions

Question

Téléchargez le code directement
Le code est le suivant, la fonction tout sélectionner n'est pas facile à utiliser

     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";
        }
     })

Changer une phrase

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";
        }
     })

Pourquoi le code s'exécute-t-il normalement lorsque _input est placé en dessous ? Ne pouvons-nous pas obtenir des variables externes dans la fonction de rappel en fonction de la portée ?

Answer 1

Vous pouvez tester les deux par vous-même : https://jsfiddle.net/8j9q69qm/

Answer 2

Je l'ai testé, les deux sont OK

Answer 3

Non, c'est pareil

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";
    }
 })

Vous le saurez après avoir consulté le journal. S'il n'est pas défini, vous saurez où réside le problème.

Answer 5

L'une consiste à vérifier les nœuds à l'avance et à les mettre en cache, et l'autre consiste à vérifier les nœuds en temps réel lorsque vous cliquez. Si le nœud correspondant au sélecteur #shop_content ul input[type=checkbox] ne change pas, les deux méthodes sont les mêmes et l'efficacité de la mise en cache est relativement élevée. Si le nœud correspondant peut être supprimé, ajouté ou remplacé, vous devez utiliser la deuxième méthode pour retrouver le nœud en temps réel à chaque fois que vous cliquez dessus