Zmienna JavaScript poza funkcją?

Question

1| <script type="text/javascript"> 
2| function more() { 
3|   $("#innerSub2").animate({ scrollTop: "+=240px" },1000); 
4|   var count = 1; 
5|   document.getElementById("dot" +count).style.color="#c7c9e9"; 
6|   var count = count + 1; 
7|   document.getElementById("dot" +count).style.color="#6464c1"; 
8|  } 
9|  </script> 

Helo, jestem całkiem nowy w javascript. Bardzo przepraszam, jeśli to głupie pytanie.
W zdarzeniu pierwszego kliknięcia zmienna działa tak, jak tego potrzebuję (wiersz 5, liczenie = 1) (wiersz 7, liczenie = 2)
Ale po drugim zdarzeniu kliknięcia muszę (linia 5, liczba = 2) (linia 7, count = 3), ale jak widzisz, resetuje się do 1 za pomocą linii 4.
Pytanie brzmi: jak mogę zadeklarować | var count = 1; | poza funkcją more(), więc nie zresetuje mojej zmiennej? lub czy jest jakiś inny sposób to zrobić ..
Także jeśli istnieje sposób, aby zatrzymać zmienną liczbę przed przekroczeniem 3, proszę podzielić
Dziękuję

Answer 1

Można zdefiniować zmienną poza funkcją, więc przyzwyczajenie skasowania, w ten sposób zakres zmiennej będzie globalna, o wiele zmiennych globalnych jest uznane za dobrą praktykę można dowiedzieć się więcej na temat zakresu i javascript/podstawami jquery w tej książce http://jqfundamentals.com/book/index.html#example-2.44

<script type="text/javascript"> 
    var count = 1; 
    function more() { 
     $("#innerSub2").animate({ scrollTop: "+=240px" },1000);   
     document.getElementById("dot" +count).style.color="#c7c9e9"; 
     count = count + 1; //removed the var word. 
     document.getElementById("dot" +count).style.color="#6464c1"; 
     } 
</script> 

Answer 2

Dokładnie jak pisałeś

var count = 1; 
    function more() { 
      $("#innerSub2").animate({ scrollTop: "+=240px" },1000); 
      document.getElementById("dot" +count).style.color="#c7c9e9"; 
      count = (count>2)?3:(count+1); 
      document.getElementById("dot" +count).style.color="#6464c1"; 
    } 

Answer 3

var count = 1; 
function more(count) { 
      $("#innerSub2").animate({ scrollTop: "+=240px" },1000); 
      document.getElementById("dot" +count).style.color="#c7c9e9"; 

      if(count < 3) 
       count += 1; 

      document.getElementById("dot" +count).style.color="#6464c1"; 

      return count; 
    } 



    then you just call more(count) on some event. 

Answer 4

Ponieważ var ustawiania go = 1 wewnątrz funkcji, a to zawsze będzie 'reset' na 1. Co trzeba zrobić, to:

var count = 1; 
function more(){ 
    //js stuff animate 
    count = count+1; 
    //other js css 
    count = count+1; 
    //another js color 
} 

to używając swojej Struktura. Chcesz przestać liczyć po 3, ale nadal inne js do pracy lub js przestać działać również? Pozwala zrobić zarówno jako przykład. 3, ale js nadal działa:

var count = 1; 
function more(){ 
    //js stuff animate 
    if(count<3){count = count+1;} 
    //other js css 
    if(count<3){count = count+1;} 
    //another js color 
} 

jeśli chcesz wszystko przestaje działać wtedy:

var count = 1; 
function more(){ 
    if(count<3){ 
     //js stuff animate 
     count = count+1; 
     //other js css 
     count = count+1; 
     //another js color 
    } 
} 

Są lepsze forma prezentacji, ale użyłem strukturę kodu, więc można lepiej zrozumieć.

Jeśli czasami trzeba zresetować licznik na tej samej stronie, ponieważ var jest poza funkcją rhe, jest to globalny var, aby inne funkcje mogły uzyskać dostęp/modyfikować. Dla np.

function resetCount(){ 
    count = 1; 
} 

Answer 5

Ponadto, aby dodać do odpowiedzi Syred, należy wprowadzić pewne sprawdzanie błędów wokół wywołań obiektów DOM. Na przykład:

<script type="text/javascript"> 
    var count = 1; 
    function more() { 
     $("#innerSub2").animate({ scrollTop: "+=240px" },1000); 
     if (document.getElementById("dot" + count) != null) { 
      document.getElementById("dot" +count).style.color="#c7c9e9"; 
      count = count + 1; //removed the var word. (could also use count++) 
      if (document.getElementById("dot" + count) != null) 
       document.getElementById("dot" +count).style.color="#6464c1"; 
     } 
    } 
</script> 

Gdybym wiedział więcej o tym, jak uzywasz funkcji, mogę zrobić inne zalecenia dotyczące sposobów usprawnienia i sprawdzić błędy, ale to powinno dać dobry pomysł.