Biến Javascript nằm ngoài chức năng?

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, tôi khá mới với javascript. Vì vậy, xin lỗi nếu đây là một câu hỏi ngu ngốc.
Trên sự kiện nhấp chuột đầu tiên biến hoạt động như tôi cần đến (dòng 5, count = 1) (dòng 7, count = 2)
Nhưng trên sự kiện nhấp chuột thứ hai tôi cần (dòng 5, count = 2) (line 7, count = 3) nhưng như bạn có thể thấy nó đặt lại thành 1 với dòng 4.
Vì vậy, câu hỏi là, làm cách nào tôi có thể khai báo | var count = 1; | bên ngoài hàm more() để nó không đặt lại biến của tôi? hoặc nếu có bất kỳ cách nào khác để làm điều này ..
Ngoài ra nếu có một cách để ngăn chặn đếm biến từ quá 3, hãy chia sẻ
Cảm ơn bạn

Answer 1

Bạn có thể định nghĩa một biến bên ngoài chức năng của bạn, vì vậy nó sẽ không được xoá hoàn toàn, cách này phạm vi biến của bạn sẽ được toàn cầu, sau khi rất nhiều các biến toàn cục được coi không phải là một thực hành tốt, bạn có thể tìm hiểu thêm về phạm vi và javascript/cơ bản jquery trong cuốn sách này 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

Chính xác cách bạn đã viết

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

Kể từ khi var là bên trong chức năng, và bạn đang cài đặt nó vào = 1, nó sẽ luôn luôn 'reset' để 1. Những gì bạn cần làm là:

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

Đây là sử dụng của bạn kết cấu. Bạn muốn dừng đếm sau 3 nhưng vẫn còn các js khác để làm việc hoặc js ngừng hoạt động? Cho phép thực hiện cả hai ví dụ. 3 nhưng js vẫn làm việc:

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 
} 

nếu bạn muốn tất cả dừng lại làm việc sau đó:

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

Có hình thức tốt hơn về trình bày nhưng tôi sử dụng cấu trúc mã của bạn, do đó bạn có thể hiểu rõ hơn.

Nếu đôi khi bạn cần đặt lại số lượng trong cùng một trang, vì var nằm ngoài hàm rhe, đó là var toàn cục để các chức năng khác có thể truy cập/sửa đổi. Ví dụ:

function resetCount(){ 
    count = 1; 
} 

Answer 5

Ngoài ra, để thêm vào câu trả lời của Syred, bạn nên đặt một số lỗi kiểm tra xung quanh lệnh gọi đối tượng DOM. Ví dụ:

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

Nếu tôi biết thêm về cách bạn đang sử dụng các chức năng, tôi có thể đưa ra khuyến cáo khác về cách sắp xếp và kiểm tra lỗi, nhưng điều này sẽ cho bạn một ý tưởng tốt.