Javascript函数之外的变量?

时间:2011-11-04 01:53:13

标签: javascript jquery

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行,计数= 1)(第7行,计数= 2)
但是我需要第二次点击事件(第5行,计数= 2)(第7行,计数= 3),但是你可以看到它用第4行重置为1。
所以问题是,我该如何声明| var count = 1; |函数more()之外所以它不会重置我的变量?或者,如果有任何其他方式可以做到这一点..
如果有办法阻止变量计数超过3,请分享
谢谢

6 个答案:

答案 0 :(得分:5)

你可以在你的函数之外定义一个变量,所以它不会被删除,这样你的变量的范围将是全局的,有很多全局变量被认为不是一个好习惯,你可以了解更多关于范围和本书中的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>

答案 1 :(得分: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";
   }

答案 2 :(得分: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.

答案 3 :(得分: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函数之外,它是一个全局var,所以其他函数可以访问/修改。例如,

function resetCount(){
    count = 1;
}

答案 4 :(得分: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>

如果我更了解您如何使用该功能,我可能会就如何简化和检查错误提出其他建议,但这应该会给您一个好主意。

答案 5 :(得分:0)

我的建议是使用 const

var info=[0,1];

function addView(btnIndex, btn){
    const index=btnIndex;
    btn.on("click", function(d){
        console.log(info[index]);
    };

}