jQuery-为什么赋值给全局变量不起作用？

Question

我正在构建一个带2个按钮的滑块，以使数字变得更高/更低。这里的jsfiddle.

这工作：

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

但是，这并不工作：

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

为什么会这样，因为VAR update_num是全球性的，所有其它功能应该能够阅读它？什么应该是使这个代码干爽的最佳方式？

Answer 1

这里的问题是update_num的值在第二个代码片段中只设置一次。例如，如果它是2.然后每次点击减号按钮时，单击加号按钮时的值为（2-1）和相同的方式（2 + 1）。 update_num的值应随每次按钮点击而改变。

你的问题说明为什么赋值给全局变量不起作用。但在第二个代码分配从未完成按钮单击。 试试这个：

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

Answer 2

记住一件事，全局变量是危险的。 假设您最初的update_num为34.所以在$('.plus').on('click', function()上的值变为35.但是如果再次单击，update_num将不会更改，因为它只在var update_num = $('output').text()*1;处设置一次。没有双向绑定，这意味着如果更改$('output').text()*1;update_num的值也将更改为 您可以搜索谷歌并了解有关two way binding或Observable Javascript Pattern的更多信息。