Question

我经常遇到这种模式有人可以给我一个只能获得image1一次的规范方法 - 如果你看一下例子二，它可以工作 - 但我不明白为什么。我对这种具体情况的解释表示赞赏，我已经阅读了网上关闭的内容：）

初始代码：

$(document).ready(function() {
  $("#prev, #next").click(function() {
    var mainImage = $("#image1");
    if (mainImage.css("visibility")=="hidden") {
      $(mainImage.css("visibility","visible");
      return;
    }
    var currentNumber = parseInt(mainImage.attr("src").split('gallery/')[1]); 
    var newNumber = ($(this).attr("id")=="next")?currentNumber+1:currentNumber-1;
    var testImage = new Image();
    testImage.onload=function() {
      var img = $("#image1");
      img.attr("src",this.src);
      img.css("visibility","visible");   
    }
    testImage.onerror=function() {
      $("#image1").css("visibility","hidden");   
    }
    testImage.src="gallery/"+newNumber+".jpg";
    return false;
  });
});

尝试关闭 - 为什么会有效 - 或者这只是一个范围问题？

$(document).ready(function() {
  $("#prev, #next").click(function() {
    var mainImage = $("#image1"); // this should be local to the click function
    if (mainImage.css("visibility")=="hidden") {
      $(mainImage.css("visibility","visible");
      return;
    }
    var currentNumber = parseInt(mainImage.attr("src").split('gallery/')[1]); 
    var newNumber = ($(this).attr("id")=="next")?currentNumber+1:currentNumber-1;
    var testImage = new Image();
    testImage.onload=function() {
      mainImage.attr("src",this.src); // how come mainImage is available here?
      mainImage.css("visibility","visible");   
    }
    testImage.onerror=function() {
      mainImage.css("visibility","hidden");// how come mainImage is available here?
    }
    testImage.src="gallery/"+newNumber+".jpg";
    return false;
  });
});

Answer 1

在javascript中，vars位于已定义的函数范围内，和此函数内的“子函数”（本地函数）。

例如：

function fun1(){
   var var1 = "Defined in fun1. ";
   function fun2(){
      var var2 = "Defined in fun2. ";
      alert(var1); //Alerts "Defined in fun1 "
      function fun3(){
          alert(var1 + var2); //Alerts "Defined in fun1. Defined in fun2";
      }
   }
   alert(var2); //Alerts 'undefined' (fun1 doesn't know var2 exists)
}

您的代码也会发生同样的情况。您的变量mainImage'存在于每个本地函数中。不要忘记绑定函数也是本地函数，即使它们没有名称或声明不同。

希望这会有所帮助。干杯

Answer 2

这是JavaScript范围的工作原理。看看以下内容：

var func1 = function(){
    console.log(i + 2);
};

var myFunc = function(){
    var i = 1;
    var func2 = function(){
        console.log(i + 2);
    };
    func2(); // output 3
    func1(); // ReferenceError: i is not defined
};

Answer 3

mainImage使用var定义，因此它对所有函数都是全局的

jQuery中的特定闭包/作用域问题

3 个答案: