2011-11-04 106 views
5
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,我很新的JavaScript。非常抱歉,如果这是一个愚蠢的问题。 (第5行,count = 1)(line 7,count = 2)
但是在第二次点击事件我需要(第5行,count = 2)(line 7,count = 3),但正如你可以看到它重置为1与第4行。
所以问题是,我该如何声明| var count = 1; |在函数more()之外,所以它不会重置我的变量?或者,如果有任何其他的方式做到这一点..
此外,如果有一种方法从超过3停止变盘点,请分享习惯
谢谢Javascript变量功能之外?

回答

3

您可以定义函数之外的变量,所以它被删除,这样你的变量的范围将是全球性的,有很多的全局变量被认为不是,你可以了解更多有关范围和JavaScript/jQuery的基础知识在这本书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> 
+2

为了防止全球污染,最好将代码包装在自动执行功能中。另一种方法是定义'move.count = 1'而不是count,并且只是定义已经定义的'more()'全局变量。 – William

+0

谢谢!我试着把“var count = 1;”上面的函数,但在函数内部有“var count = count + 1;”这就是为什么它不起作用。取出“var”就有诀窍。谢谢你们 – iamruskie

+0

我很高兴它的工作!不要停止学习我与你分享的这本书对于学习基础知识是非常有帮助的,请看一看,并且请将这个问题标记为网站的规则所说的答案,http:// stackoverflow。com/faq#howtoask“这让其他人知道你已经收到了你的问题的一个很好的答案,这样做很有帮助,因为它显示了其他人你从社区中获得价值(如果你不这样做,人们会经常礼貌地要求你回去接受更多问题的答案!)“ – ElHacker

0

一个很好的做法你究竟如何写

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"; 
    } 
0
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. 
+1

只是出于好奇,为什么要混合jQuery和直线js?的document.getElementById( “点” +计数).style.color = “#c7c9e9”;应该只是$('#dot'+ count).css('color','c7c9e9') –

0

由于VAR是内部函数,你将它设置为= 1,它将始终“复位”为1,你需要做的是:

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

这是使用结构体。 你想在3点后停止计数,但其他js仍然工作或js停止工作吗? 让我们以两者为例。 3个,但仍JS工作:

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 
} 

,如果你想停止所有工作,然后:

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

有呈现更好的形式,但我用了你的代码结构,使你可以更好的了解。

如果有时需要在同一页面重置计数,由于var在rhe函数外,因此它是一个全局变量,因此其他函数可以访问/修改。对于例如

function resetCount(){ 
    count = 1; 
} 
0

此外,要添加到Syred的答案,您应该对DOM对象调用进行一些错误检查。例如:

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

如果我知道更多关于你如何使用功能,我可能就如何精简和检查错误,但是这应该给你一个好主意,其他建议。