函数外的 Javascript 变量？

Javascript Variable outside of function?

提问by iamruskie

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, I am pretty new to javascript. So sorry if this is a stupid question.
On the first click event the variable works as i need it to( line 5, count=1)(line 7, count=2)
But on second click event i need ( line 5, count=2)(line 7, count=3) but as you can see it resets to 1 with line 4.
So the question is, how can I declare | var count = 1; | outside of function more() so it won't reset my variable? or if there is any other way to do this..
Also if there is a way to stop variable count from exceeding 3, please share
Thank you

你好，我对 javascript 很陌生。很抱歉，如果这是一个愚蠢的问题。
在第一个点击事件中，变量按照我的需要工作（第 5 行，计数 = 1）（第 7 行，计数 = 2）
但在第二个点击事件中我需要（第 5 行，计数 = 2）（第 7 行，计数 = 3) 但正如你所看到的，它在第 4 行重置为 1。
所以问题是，我如何声明 | 无功计数 = 1; | 在函数 more() 之外所以它不会重置我的变量？或者如果有任何其他方法可以做到这一点。
另外，如果有办法阻止变量计数超过 3，请分享
谢谢

采纳答案by ElHacker

You can define a variable outside your function, so it wont be erased, this way the scope of your variable will be global, having a lot of global variables is considered not to be a good practice you can learn more about scope and javascript/jquery basics in this book http://jqfundamentals.com/book/index.html#example-2.44

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

回答by Itay Moav -Malimovka

Exactly how u wrote

你是怎么写的

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

回答by Kai Qing

 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.

回答by RaphaelDDL

Since the var is inside function, and you are setting it to = 1, it will always 'reset' to 1. What you need to do is:

由于 var 在函数内部，并且您将其设置为 = 1，因此它将始终“重置”为 1。您需要做的是：

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

This is using your structure. You want to stop counting after 3 but still the other js to work or js stop working also? Lets make both as example. 3 but js still work:

这是使用你的结构。您想在 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
}

if you want all stop working then:

如果你想停止工作，那么：

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

There are better form of presenting but i used your code structure so you could better understand.

有更好的呈现形式，但我使用了您的代码结构，以便您更好地理解。

If sometime you need to reset the count in the same page, since the var is outside rhe function, it is a global var so other functions can access / modify. For e.g.

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

function resetCount(){
    count = 1;
}

回答by ronx

Also, to add to Syred's answer, you should put some error checking around the DOM object calls. For example:

此外，要添加 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>

If I knew more about how you were using the function, I might make other recommendations on how to streamline and check for errors, but this should give you a good idea.

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

回答by Lynne

My suggestion is to use const.

我的建议是使用const。

var info=[0,1];

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

}