使用 jQuery 递增变量

increment variable using jquery

本文关键字：变量 jQuery 使用      更新时间：2023-09-26

我觉得这是一件非常基本的事情，但我似乎找不到解决方案。 我试图在加载 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>

提前感谢任何帮助！

你应该改变

var x = x+1;

自

x = x+1

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

你在加载回调函数中声明局部变量，所以它不会增加全局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);
});​

该网页：

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

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

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 有"函数作用域"——变量只存在于创建它们的函数中。所以有可能有几个不同的变量命名为 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;
    });
});

使用 jQuery 进行上述查询的另一个更改解决方案在这里...

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

也试穿代码箱 http://codebins.com/codes/home/4ldqpbk

相关文章：