jQuery 在 .click 之后不传递变量

Question

所以我正在运行一个简单的 jQuery 脚本。它有2个按钮，1个发送数据，1个按钮需要设置第一个发送的变量之一的值。

好的，这里是按钮 1 的脚本（称为预览）：

$('#execute').click(function() {
$('#currentImage').remove();

$.ajax({
   type: "POST",
   url: "effect.php",
   data: { action: $("[name='action']:checked").val(), source: sourceImage, destination: destinationImage, variables: $('#variables').val() },
   success: function(msg){
     $('#workspace').html(msg);
     $("#preview").attr("src", destinationImage+"?timestamp=" + new Date().getTime());
   }
 }); });

它的作用是对图像添加效果，并且效果非常好。 javascript 的第一行之一包含“sourceImage”变量。

var sourceImage = '20101201161609.jpg';

该变量已正确传递给上面的脚本。 第二个按钮（称为“保存状态”）可确保我对图像的效果感到满意，保存图像的状态，并继续对该图像进行效果。这意味着需要更改源图像，我使用以下脚本：

$('#save_state').click( function() {
var sourceImage = '2010-12-02-35-20-preview.png';
$('#header').html(sourceImage); });

我留下了行 $('#header').html(sourceImage); 来检查它是否确实被触发，确实如此，所以这条线不是必需的，但我确信该操作已被触发。

但是，我再次单击“预览”将变量 sourceImage 的值更改回其开始时的值，而实际上它需要保留这个新值。

希望有人可以帮助我。

Answer 1

通过使用 var 关键字，您可以在函数中声明一个局部变量，该变量与同名的全局变量分开。删除 var 关键字以访问全局变量：

$('#save_state').click( function() {
  sourceImage = '2010-12-02-35-20-preview.png';
  $('#header').html(sourceImage);
});

Answer 2

第二个函数中的 sourceImage 变量的作用域仅限于函数本地，并且不引用同一变量。我认为您只需删除 var 关键字即可使其按照您想要的方式工作。话虽如此，您应该非常小心地使用全局范围的变量。一般来说，您希望尽可能缩小变量的范围。您可能想使用 data 函数将此值存储在 DOM 中，但如果不进一步了解您要做什么就很难知道。

Answer 3

在这里...

$('#save_state').click( function() {
var sourceImage = '2010-12-02-35-20-preview.png';
$('#header').html(sourceImage); });

...您绝对什么也没做，因为您正在设置local（如var所示）变量sourceImage，该变量立即超出范围。全局（窗口）变量 sourceImage 保持不变。