incrementa la variable usando jquery

Question

Siento que esto es algo bastante básico, pero parece que no puedo encontrar la solución. Estoy tratando de incrementar un valor después de la carga de un IFRAME.

el código es el siguiente:

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

Lo que quiero hacer es dar una serie de marcos flotantes cargados que las actualizaciones cuando un iframe completa su carga. El código de salida es el siguiente:

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

¡muchas gracias de antemano por su ayuda!

Answer 1

que finalmente se le ocurrió una solución muy 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"; 
     }); 
    }); 

Answer 2

Debe cambiar

var x=x+1; 

a

x=x+1 

Debido a que la palabra clave var está creando una nueva variable cada vez en cada una de sus variables load tan global x no está consiguiendo puestas al día/incrementado.

Answer 3

Declara la variable local en la función de devolución de carga, por lo que no aumentará el x global, puede declarar var x dentro de la función de devolución de llamada dom y usarlo en la función de devolución de llamada de carga.

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

Editar: Después de esto, document.write(x + " Results"); todavía no funcionará, ya que se ejecuta antes que el iframe se ha cargado. Debe hacer un control de forma asincrónica.

Aquí es 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); 
});​ 

El 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 "ámbito de la función" - las variables sólo existen dentro de la función para la que fueron creados en Por lo tanto, es posible tener varias variables diferentes nombrados x, si y solo. si están en diferentes funciones (que es el caso aquí).

Las variables se crean con la palabra clave var y se accede sin una palabra clave. Entonces, var x = 10; crea una variable llamada x, y modifica una variable existente llamada x.

En su código, cada función llama al var x = 10;. Dado que el x previamente definido se definió en una función externa, esa línea es válida y creó una nueva variable llamada x, con alcance a la función a la que se llama. Si omitiera la instrucción var, el intérprete primero miraría el el espacio de nombres de la función actual y no encuentra x. Luego se movería al alcance global y encontraría el x que ya había declarado, y lo usaría.

En resumen, omitir la palabra var en todas las líneas excepto la línea 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

Otra solución alter consulta anterior usando jQuery es aquí ...

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

prueba la codebins demasiado http://codebins.com/codes/home/4ldqpbk