Fonction de chargement ne mettant pas à jour la variable globale

Question

Je crée une application de nœud et je n'arrive pas à mettre à jour une variable globale.

Voici mon code (fichier SEJ):

<% include ../partials/header %> 

    <div class="page container"> 
     <div id="campgroundsRow" class="row"> 
     </div> <!-- row end --> 
     <button id="loadMore">Load More</button> 
    </div> <!-- Container End --> 
    <% include ../partials/footer %> 

    <script> 
     var numGroundsToLoad = 1; 
     var numGroundsLoaded = 0; 

     loadCampgrounds(numGroundsLoaded, numGroundsToLoad); 

     function loadCampgrounds(numGroundsLoaded, numGroundsToLoad) { 
       var grounds = <%-JSON.stringify(campgrounds) %> 
       for(var i=numGroundsLoaded + 1; i<numGroundsLoaded + numGroundsToLoad; i++) { 
        //code to add grounds[i] to campgroundsRow div 
       } 
       numGroundsLoaded += numGroundsToLoad; 
     } 

     $("#loadMore").on("click", function() { 
       loadCampgrounds(numGroundsLoaded, numGroundsToLoad); 
     }); 
    </script> 

Le problème que je vais avoir est la fonction loadCampgrounds n'est pas réellement mettre à jour numGroundsLoaded. Donc, quand je clique sur le bouton charger plus (#loadMore), il pense que j'ajoute ground[0].

Ce que je veux, c'est que chaque fois que je clique sur Charger plus, le terrain suivant est ajouté. Par exemple, ground[0] est ajouté par défaut. Puis sur le chargement plus, ground[1]. Puis sur le chargement plus, ground[2] et ainsi de suite (supposons qu'il existe des motifs illimités pour le moment).

Comme vous pouvez le voir, le problème est lié à la fois à la portée et au chargement des éléments. Étant donné que vous mettez à jour la variable locale,

Answer 1

Dans ce cas, pour mettre à jour la variable globale, vous devez y accéder via window.numGroundsLoaded.