[英]jQuery- Why assigning a value to a global variable doesn't work inside a function?
I'm building a slider with 2 buttons to make the number go higher/lower. 我正在构建一个带有2个按钮的滑块,以使数字升/降。 Here's jsfiddle.
这是jsfiddle。
This works: 这有效:
var update_num;
$('.plus').on('click', function() {
update_num = $('output').text()*1;
if (update_num < 100) {
$('output').text(update_num + 1);
} else {
$('output').text(100);
}
});
$('.minus').on('click', function() {
update_num = $('output').text()*1;
if (update_num > 0) {
$('output').text(update_num - 1);
} else {
$('output').text(0);
}
});
But this doesn't work: 但这不起作用:
var update_num = $('output').text()*1;
$('.plus').on('click', function() {
if (update_num < 100) {
$('output').text(update_num + 1);
} else {
$('output').text(100);
}
});
$('.minus').on('click', function() {
if (update_num > 0) {
$('output').text(update_num - 1);
} else {
$('output').text(0);
}
});
Why is it so, since var update_num is global and all other functions should be able to read it? 为什么会这样,因为var update_num是全局的,并且所有其他函数都应该能够读取它? And what should be the best way to make this code DRY?
使该代码成为DRY的最佳方法应该是什么?
The problem here is that the value of update_num is set only once in the second code snippet. 这里的问题是,在第二个代码片段中, update_num的值仅设置了一次。 For example if its 2. Then every time the minus button is clicked, the value is (2-1) and same way (2+1) when plus button is clicked.
例如,如果其值为2。则每次单击减号按钮时,其值分别为(2-1)和单击加号按钮时的方式为(2 + 1)。 The value of update_num should change with every button click.
每单击一次按钮, update_num的值应更改一次。
Your question says why assigning value to global variable doesnt work. 您的问题说,为什么不给全局变量赋值。 But in the second code assignment is never done on button click.
但是在第二个代码中,单击按钮时永远不会完成代码分配。 Try this:
尝试这个:
var update_num = $('output').text()*1;
$('.plus').on('click', function() {
if (update_num < 100) {
$('output').text(++update_num);
} else {
$('output').text(100);
}
});
$('.minus').on('click', function() {
if (update_num > 0) {
$('output').text(--update_num);
} else {
$('output').text(0);
}
});
Remember one thing, global variable are dangerous. 记住一件事,全局变量很危险。 Say you have initially
update_num
as 34. So on $('.plus').on('click', function()
the value becomes 35. But if you again click, the update_num will not change as it is set only once at var update_num = $('output').text()*1;
There is no two way binding which means that if you change $('output').text()*1;
the value of update_num
will also change You can search google and learn more about the two way binding
or the Observable Javascript Pattern
. 假设您最初将
update_num
为34。因此在$('.plus').on('click', function()
该值变为35。但是如果再次单击,则update_num不会更改,因为它仅在一次被设置var update_num = $('output').text()*1;
没有两种方式绑定,这意味着如果更改$('output').text()*1;
则update_num
的值也将更改。搜索google并了解有关two way binding
或Observable Javascript Pattern
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.