9

これはかなり基本的なことのように感じますが、解決策が見つからないようです。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の数を指定することです。現在、出力コードは次のようになっています。

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

助けてくれてありがとう！

4

5 に答える 5

16

あなたは変わるべきです

var x = x+1;

に

x = x+1

varキーワードが毎回新しい変数を作成しているためload、グローバル変数xは更新/インクリメントされていません。

于 2012-07-05T05:57:51.020 に答える
6

load コールバック関数でローカル変数を宣言するため、 global は増加しません。dom ready コールバック関数内でx宣言し、load コールバック関数で使用できます。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++;  
    });
});

編集: iframe が読み込まれる前に実行されるため 、この後document.write(x + " Results");も機能しません。非同期でチェックを行う必要があります。

これがライブデモです。

$(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>
于 2012-07-05T05:58:18.383 に答える
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";
        });
    });
于 2012-07-05T23:36:08.147 に答える
0

Javascriptには「関数スコープ」があります-変​​数は、それらが作成された関数内にのみ存在します。したがってx、異なる関数にある場合に限り、複数の異なる変数を持つことができます(ここではそうです)。

変数はキーワードで作成され、varキーワードなしでアクセスされます。したがって、var x = 10;という名前の変数を作成し、 という名前の既存の変数xを変更します。x = 10;x

あなたのコードでは、すべての関数が を呼び出しますvar x = 10;。以前xに定義された は外部関数で定義されているため、その行は有効であり、x呼び出されている関数をスコープとする という名前の新しい変数を作成しました。varステートメントを省略した場合、インタープリターは最初に現在の関数の名前空間を調べます。見つからないx。次に、グローバル スコープに移動し、x既に宣言した を見つけて使用します。

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;
    });
});
于 2012-07-05T06:08:29.327 に答える
0

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

于 2012-07-05T10:25:08.597 に答える