incrémenter variable en utilisant jquery

Je pense que c’est une chose assez fondamentale, mais je n’arrive pas à trouver la solution. J’essaie d’incrémenter une valeur après le chargement d’un IFRAME.

le code ressemble à ceci:

var x=0; $(document).ready(function() { $('#iframe-2').load(function() { var x=x+1; }); $('#iframe-3').load(function() { var x=x+1; }); $('#iframe-4').load(function() { var x=x+1; }); $('#iframe-5').load(function() { var x=x+1; }); }); 

Ce que je veux faire, c’est donner un certain nombre d’iframes chargés qui sont mis à jour lorsqu’un iframe termine son chargement. Le code de sortie est comme ceci actuellement:

  document.write(x + " Results");  

merci beaucoup d’avance pour toute aide!

Tu devrais changer

 var x=x+1; 

à

 x=x+1 

Comme le mot clé var crée une nouvelle variable à chaque fois dans votre load , la variable globale x n’est ni mise à jour ni incrémentée.

Vous déclarez une variable locale dans la fonction de rappel de chargement, de sorte qu’elle n’augmente pas le x global, vous pouvez déclarer var x intérieur de la fonction de rappel dom ready et l’utiliser dans la fonction de rappel de chargement.

 $(document).ready(function() { var x = 0; $('#iframe-2').load(function() { x++; }); $('#iframe-3').load(function() { x++; }); $('#iframe-4').load(function() { x++; }); $('#iframe-5').load(function() { x++; }); }); 

Edit: après cela, document.write(x + " Results"); ne fonctionne toujours pas, car il s’exécute avant le chargement de l’iframe. Vous devez effectuer une vérification de manière asynchrone.

Voici la démo en direct .

 $(document).ready(function() { var x = 0; $('iframe').load(function() { x++; }); var time_id = setInterval(function() { $('#count').text(x); if (x === $('iframe').length) { clearInterval(time_id); } }, 200); });​ 

Le html:

     
Loaded iframe count: 0

J’ai finalement trouvé une solution très simple:

 var x=0; $(document).ready(function() { $('#iframe-2').load(function() { $("#t2").css("display","inline"); x++; document.getElementById("tabs-1").innerHTML=x + " Results"; }); $('#iframe-3').load(function() { $("#t3").css("display","inline"); x++; document.getElementById("tabs-1").innerHTML=x + " Results"; }); $('#iframe-4').load(function() { $("#t4").css("display","inline"); x++; document.getElementById("tabs-1").innerHTML=x + " Results"; }); $('#iframe-5').load(function() { $("#t5").css("display","inline"); x++; document.getElementById("tabs-1").innerHTML=x + " Results"; }); }); 

Javascript a une “scope de fonction” – les variables n’existent que dans la fonction dans laquelle elles ont été créées. Il est donc possible d’avoir plusieurs variables différentes nommées x , si et seulement si elles se trouvent dans des fonctions différentes (comme c’est le cas ici).

Les variables sont créées avec le mot-clé var et accessibles sans mot-clé. Donc, var x = 10; crée une variable nommée x et x = 10; modifie une variable existante nommée x .

Dans votre code, chaque fonction appelle var x = 10; . Puisque le x précédemment défini a été défini dans une fonction externe, cette ligne est valide et a créé une nouvelle variable nommée x , étendue à la fonction à laquelle elle est appelée. Si vous deviez omettre l’instruction var , l’interpréteur examinera d’abord le l’espace de noms de la fonction actuelle et ne pas trouver x . Ensuite, il passerait à la scope globale et trouverait le x que vous avez déjà déclaré, et l’utiliserait.

En bref, omettez le mot var dans chaque ligne sauf la ligne 1:

 var x = 0; $(document).ready(function () { $('#iframe-2').load(function () { x = x + 1; }); $('#iframe-3').load(function () { x = x + 1; }); $('#iframe-4').load(function () { x = x + 1; }); $('#iframe-5').load(function () { x = x + 1; }); }); 

Une autre solution de remplacement pour la requête ci-dessus utilisant jQuery est ici …

HTML:

 

JQuery:

 var x = 0; $(function() { $('iframe:eq(0)').load(function() { x = x + 1; result(x); }); $('iframe:eq(1)').load(function() { x = x + 1; result(x); }); $('iframe:eq(2)').load(function() { x = x + 1; result(x); }); $('iframe:eq(3)').load(function() { x = x + 1; result(x); }); }); function result(x) { if (x == null || typeof(x) == "undefined") x = 0; $("#top").html("
Loaded iframe count: " + x + "

"); $("#bottom").html("
Loaded iframe count: " + x + "
"); }

Essayez aussi codebins http://codebins.com/codes/home/4ldqpbk