使用jquery增加变量

我觉得这是一个非常基本的东西，但我似乎无法找到解决方案。 我试图在加载IFRAME后增加一个值。

代码看起来像这样：

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

我想要做的是提供一些加载的iframe，当iframe完成加载时会更新。 输出代码目前是这样的：

  document.write(x + " Results");  

非常感谢提前帮助！

Answer 1

你应该改变

 var x=x+1; 

至

 x=x+1 

因为var关键字每次都在每次load时创建一个新变量，所以全局变量x没有得到更新/递增。

Answer 2

你在加载回调函数中声明局部变量，因此它不会增加全局x ，你可以在dom ready回调函数中声明var x ，并在加载回调函数中使用它。

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

编辑：在此之后， document.write(x + " Results"); 仍然无法工作，因为它在iframe加载之前执行。 您需要异步检查。

这是现场演示 。

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

html：

     
 Loaded iframe count: 0 

Answer 3

我终于提出了一个非常简单的解决方案：

 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 4

Javascript具有“函数范围” – 变量仅存在于它们创建的函数中。因此，当且仅当它们在不同的函数中时（这里是这种情况），可以有几个不同的变量名为x 。

使用var关键字创建变量，并在没有关键字的情况下访问变量。 所以， var x = 10; 创建一个名为x的变量， x = 10; 修改名为x的现有变量。

在你的代码中，每个函数调用var x = 10; 。 由于先前定义的x是在外部函数中定义的，因此该行有效并创建了一个名为x的新变量，该变量作用于调用它的函数。如果要省略var语句，解释器将首先查看当前函数的命名空间而不是找到x 。 然后它将移动到全局范围并找到您已声明的x ，并使用它。

简而言之，在第1行之外的每一行中省略var一词：

 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

使用jQuery进行上述查询的另一个改进解决方案是……

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

也可以尝试编码http://codebins.com/codes/home/4ldqpbk