Przyrostowa zmienna przy użyciu jquery

Question

Czuję, że to dość podstawowa rzecz, ale nie mogę znaleźć rozwiązania. Próbuję zwiększyć wartość po załadowaniu IFRAME.

kod wygląda następująco:

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

Co chcę zrobić, to dać liczbę załadowanych iframe, że aktualizacje, gdy iframe kończy ładowanie. Kod wyjściowy wygląda następująco:

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

dziękuję z góry za wszelką pomoc!

Answer 1

I wreszcie wymyślił rozwiązanie bardzo proste:

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

należy zmienić

var x=x+1; 

do

x=x+1 

Ponieważ kluczowe var jest tworzenie nowej zmiennej za każdym razem, w każdym swoim load tak zmiennej globalnej x nie jest uzyskiwanie zaktualizowane/zwiększany.

Answer 3

zadeklarować zmienną lokalną w funkcji obciążenia zwrotnego, więc nie wzrośnie globalna x, można zadeklarować var x wewnątrz Domu funkcji zwrotnej gotowy i używać go w funkcji wywołania zwrotnego obciążenia.

$(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: Po tym, document.write(x + " Results"); nadal nie będzie działać, ponieważ wykonuje przed iframe została załadowana. Musisz wykonać kontrolę asynchronicznie.

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

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> 

Answer 4

JavaScript „Zakres funkcji” - zmienne istnieją tylko wewnątrz funkcji zostały one utworzone w Tak to jest możliwe, aby mieć kilka różnych zmiennych o nazwach x, wtedy i tylko wtedy. jeśli są w różnych funkcjach (co ma tu miejsce).

Zmienne są tworzone za pomocą słowa kluczowego var i są dostępne bez słowa kluczowego. Tak więc var x = 10; tworzy zmienną o nazwie x, a modyfikuje istniejącą zmienną o nazwie x.

W kodzie każda funkcja wywołuje var x = 10;. Ponieważ zdefiniowane wcześniej x zostało zdefiniowane w funkcji zewnętrznej, linia ta jest poprawna i utworzono nową zmienną o nazwie x, z zakresem obejmującym funkcję, do której jest ona wywoływana. Jeśli pominięto instrukcję var, tłumacz najpierw spojrzałby na obecnej przestrzeni nazw funkcji i nie można znaleźć x. Następnie przesunie się do zasięgu globalnego i znajdzie x, który już zadeklarowałeś i użyjesz tego.

Krótko mówiąc, należy pominąć słowa var w każdej linii z wyjątkiem linii 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; 
    }); 
}); 

Answer 5

Innym rozwiązaniem powyższego alter zapytania przy użyciu jQuery jest tutaj ...

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

przymierzyć codebins zbyt http://codebins.com/codes/home/4ldqpbk