incremento variabile utilizzando jquery

Question

Mi sembra che questa sia una cosa piuttosto semplice, ma non riesco a trovare la soluzione. Sto cercando di incrementare un valore dopo il caricamento di un IFRAME.

il codice simile a questo:

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

Quello che voglio fare è dare un certo numero di iframe caricati che gli aggiornamenti quando un iframe completa il suo carico. Il codice di uscita è attualmente il seguente:

<script language="javascript"> 
document.write(x + " Results"); 
</script> 

grazie in anticipo per qualsiasi aiuto!

Answer 1

ho finalmente si avvicinò con una soluzione molto semplice:

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

Answer 2

Si dovrebbe cambiare

var x=x+1; 

a

x=x+1 

Perché la parola var sta creando una nuova variabile ogni volta in ogni vostra variabile load in modo globale x non è sempre aggiornato/incrementato.

Answer 3

Si dichiara variabile locale nella funzione di richiamo del caricamento, quindi non aumenterà il valore globale x, è possibile dichiarare var x all'interno della funzione di richiamata dom ready e utilizzarlo nella funzione di richiamo del caricamento.

$(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: Dopo questo, document.write(x + " Results"); ancora non funziona, perché viene eseguito prima l'iframe è stato caricato. È necessario eseguire un controllo in modo asincrono.

Ecco the live demo.

$(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); 
});​ 

il codice HTML:

<iframe src="http://www.w3schools.com"></iframe> 
<iframe src="http://www.w3schools.com"></iframe> 
<iframe src="http://www.w3schools.com"></iframe> 
<iframe src="http://www.w3schools.com"></iframe> 
<hr> 
Loaded iframe count: <span id="count">0<span> 

Answer 4

Javascript deve "funzione di scope" - esistono variabili solo all'interno della funzione sono stati creati in questo modo è possibile avere diverse variabili denominate x, se e solo. se sono in funzioni diverse (che è il caso qui).

Le variabili vengono create con la parola chiave var e accessibili senza una parola chiave. Quindi, var x = 10; crea una variabile denominata x e modifica una variabile esistente denominata x.

Nel proprio codice ogni funzione chiama var x = 10;. Poiché il valore definito in x è stato definito in una funzione esterna, quella riga è valida e ha creato una nuova variabile denominata x, con scope alla funzione in cui è chiamata. Se si omette l'istruzione var, l'interprete deve prima esaminare il spazio dei nomi della funzione corrente e non trovare x. Quindi passerebbe allo scope globale e troverà lo x che hai già dichiarato e lo userai.

Insomma, omettere la parola var in ogni riga, tranne la linea 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; 
    }); 
}); 

Answer 5

Un'altra soluzione alter per query di cui sopra utilizzando jQuery è qui ...

HTML:

<div id="top"></div> 
<iframe src="http://jquery.com/"></iframe> 
<iframe src="http://jquery.com/"></iframe> 
<iframe src="http://jquery.com/"></iframe> 
<iframe src="http://jquery.com/"></iframe> 
<div id="bottom"></div> 

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("<div>Loaded iframe count: " + x + "</div><hr/>"); 
    $("#bottom").html("<hr/><div>Loaded iframe count: " + x + "</div>"); 
} 

provare su codebins troppo http://codebins.com/codes/home/4ldqpbk