[英]Javascript Variable outside of function?
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)(第7行,count = 2)
但是在我需要的第二次点击事件中(第5行,计数= 2)(第7行,计数= 3)但是你可以看到它用第4行重置为1。
所以问题是,我该如何声明| var count = 1; | 函数more()之外所以它不会重置我的变量? 或者如果还有其他方法可以做到这一点..
如果有办法阻止变量计数超过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>
我的建议是使用const 。
var info=[0,1];
function addView(btnIndex, btn){
const index=btnIndex;
btn.on("click", function(d){
console.log(info[index]);
};
}
你究竟是怎么写的
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";
}
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.
由于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;
}
另外,要添加到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>
如果我更了解您如何使用该功能,我可能会就如何简化和检查错误提出其他建议,但这应该会给您一个好主意。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.