使用jquery递增变量

Question

我觉得这是一件很基本的事情，但我似乎找不到解决方案。我试图在加载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完成加载时，这些iframe会更新。当前输出代码如下：

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

提前感谢大家的帮助！

Answer 1

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

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

你应该改变

var x = x+1;

至

x = x+1

因为var关键字每次都会在您的每个load中创建一个新变量，所以全局变量x不会更新/递增。

Answer 3

你在加载回调函数中声明局部变量，所以它不会增加全局x，你可以在dom就绪的回调函数中声明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：

<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>