访问在更改方法之外的更改方法中更改的变量的值？

Question

我之前尝试过问这种类型的问题，但我不明白我想做的事情是否可行。当事情发生变化时，例如更改选择下拉列表或选中或取消选中复选框时，是否可以将这些值放入全局变量中，以便稍后在代码中使用这些值 例如我想做这样的事情

var amountChosen;

$('#amountItems').change(function(){
            amountchosen = $('#amountItems option:selected').val();
            alert(amountchosen)
});

所以我希望 amountChosen 的值在 change 方法中发生变化，因为我知道它是这样工作的，但我不会将其应用于全局变量。

因为我想在另一个函数的深处做这样的事情

if(amountChosen == 2){
    do this
}
if(amountChosen == 3){
    do this
}
etc.

我永远无法在更改方法之外获得价值，这是一个大问题。

如果我的代码中有一些地方，我需要在其中提取信息，例如用户检查了这个以及他选择的项目数量。据我所知，我必须在 .change 方法或 .is('checked') 中完成所有这些工作。如何使更改的变量在远离代码的函数的参数中可用。

总结一下。我有不同的功能根据状态做不同的事情（我猜它就是这样）。我在获取函数中的更新状态时遇到问题，因此我可以根据状态进行操作

Answer 1

您可能想使用事件发射器或发布-订阅系统进行探索。由于您已经在使用 jQuery，因此很容易创建我们自己的发射器。

$emitter = $({});

function foo() {
  $('#amountItems').change(function(){
    var amountchosen = $('#amountItems option:selected').val();
    $emitter.trigger('amountUpdate', amountchosen);
  });
}

function bar() {
  $emitter.on('amountUpdate', function(e, amount){
    // do something with the amount
  });
}

这使您处于相同的情况，即两个函数都需要将事件发射器置于其范围内，但发射器可以是许多非耦合或松耦合组件相互通信的通道。

Answer 2

您不需要做任何特别的事情：如果您使用在函数范围“外部”定义的变量，则会创建一个闭包，并且该函数将保留对该变量的引用。这么多函数可以引用同一个变量。

例如在您的代码中非常高（如在全局级别）：

// At the top of your main file.js
var myVar = initialValue;

// somewhere deeper into the code (getter)
function one() {
  if (myVar === something) { ... }
}

// Somewhere else like from another file (setter)
function two() {
  myVar = something;
}

如果您无法访问这些函数之一的 myVar，这意味着您没有将 myVar 声明得足够高。当我说“高”时，我在考虑范围层次结构：

// global level, very high
var rootVariable;

function toto() {
  // toto level, has access to rootVariable
  var totoVar;
}

function tutu() {
  // tutu level, has access to rootVariable but not totoVar
  var tutuVar;
}

如果我误解了您的问题或仍然无法解决问题，请尝试创建一个 jsfiddle 来重现您的问题。

Answer 3

一个非常简单的解决方案是简单地将值保存在某处，然后再查找它：

<input type="text" id="amountItems" data-amount-chosen="0">

$('#amountItems').change(function(){
    amountchosen = $('#amountItems option:selected').val();
    $('#amountItems').data("amount-chosen", amountchosen);
    alert(amountchosen);
});

// somewhere later...
var amountchosen = $('#amountItems').data("amount-chosen");
if(amountChosen == 2){
    do this
}
if(amountChosen == 3){
    do this
}
etc.

请注意，我们只是更改了 html 标记以添加数据元素，将正确的数据保存在那里，然后在需要时再次查找。