Javascript 使用jquery增加变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11338499/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
increment variable using jquery
提问by user791187
I feel like this is a pretty basic thing, but I cant seem to find the solution. Im trying to increment a value after the loading of an IFRAME.
我觉得这是一件非常基本的事情，但我似乎无法找到解决方案。我试图在加载 IFRAME 后增加一个值。
the code looks like this:
代码如下所示：
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;
});
});
What I want to do is give a number of loaded iframes that updates when an iframe completes its loading. The output code is like this currently:
我想要做的是提供一些已加载的 iframe，这些 iframe 在 iframe 完成加载时会更新。目前的输出代码是这样的：
<script language="javascript">
document.write(x + " Results");
</script>
thanks a ton in advance for any help!
提前感谢您的帮助！
采纳答案by user791187
I finally came up with a very simple solution:
我终于想出了一个非常简单的解决方案：
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";
});
});
回答by The Alpha
You should change
你应该改变
var x=x+1;
to
到
x=x+1
Because the varkeyword is creating a new variable every time in your every loadso global variable xis not getting updated/incremented.
因为var关键字每次都会在您的每个load全局变量中创建一个新变量，因此x不会更新/递增。
回答by xdazz
You declare local variable in the load callback function, so it will not increase the global x, you could declare var xinside of dom ready callback function, and use it in load callback function.
您在加载回调函数中声明局部变量，因此它不会增加全局变量x，您可以var x在 dom ready 回调函数内部声明，并在加载回调函数中使用它。
$(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:After this, document.write(x + " Results");still won't work, because it executes before the iframe has been loaded. You need to do a check asynchronously.
编辑：在此之后，document.write(x + " Results");仍然无法工作，因为它在 iframe 加载之前执行。您需要异步进行检查。
Here is 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);
});?
The html:
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>
回答by st-boost
Javascript has "function scope" - variables exist only within the function they were created in. So it is possible to have several different variables named x, if and only if they are in different functions (which is the case here).
Javascript 具有“函数作用域”——变量只存在于创建它们的函数中。因此x，当且仅当它们在不同的函数中（这里就是这种情况）时，才有可能有多个不同的变量命名为。
Variables are created with the varkeyword and accessed without a keyword. So, var x = 10;creates a variable named x, and x = 10;modifies an existing variable named x.
变量是用var关键字创建的，不用关键字就可以访问。因此，var x = 10;创建一个名为 的变量x，并x = 10;修改一个名为 的现有变量x。
In your code every function calls var x = 10;. Since the previously defined xwas defined in an outer function, that line is valid and created a new variable named x, scoped to the function it is being called in. If you were to omit the varstatement, the interpreter would first look at the current function's namespace and not find x. Then it would move up to the global scope and find the xthat you already declared, and use that.
在您的代码中，每个函数都调用var x = 10;. 由于先前定义x是在外部函数中定义的，因此该行是有效的，并创建了一个名为 的新变量x，作用域为正在调用它的函数。如果省略该var语句，解释器将首先查看当前函数的命名空间并没有找到x。然后它会向上移动到全局范围并找到x您已经声明的 ，并使用它。
In short, omit the word varin every line except line 1:
简而言之，省略var除第 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;
});
});
回答by gaurang171
Another alter solution for above query using jQuery is here...
使用 jQuery 的上述查询的另一个更改解决方案是在这里...
HTML:
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>");
}
Try on codebins too http://codebins.com/codes/home/4ldqpbk
也尝试使用 codebins http://codebins.com/codes/home/4ldqpbk
