Question

这是我的代码：

$(window).load(function() {
  var theImage = $('ul li img');
  var theWidth = theImage.width();
  //wrap into mother div
  $('ul').wrap('<div class="gallery-slide" />');
  //assign height width and overflow hidden to gallery-slide
  $('.gallery-slide').css({
    width: function() {
      return theWidth;
    },
    height: function() {
      return theImage.height();
    },
    position: 'relative',
    overflow: 'hidden'
  });
  //get total of image sizes and set as width for ul
  var totalWidth = theImage.length * theWidth;
  $('ul').css({
    width: function() {
      return totalWidth;
    }
  });
});

$('ul li img').each(function(intIndex) {
  $(this).nextAll('a').bind("click", function() {

    if ($(this).is(".next")) {
      $(this).parent('li').parent('ul').animate({
        "margin-left": (-(intIndex + 1) * theWidth)
      }, 1000);
    } else if ($(this).is(".previous")) {
      $(this).parent('li').parent('ul').animate({
        "margin-left": (-(intIndex - 1) * theWidth)
      }, 1000);
    } else if ($(this).is(".startover")) {
      $(this).parent('li').parent('ul').animate({
        "margin-left": (0)
      }, 1000);
    }
  }); //close .bind()
}); //close .each()

以上是我的代码，抛出错误theWidth未定义。

Answer 1

JavaScript有function-level scope（在ECMAScript 6之前），如果在curly braces包围的某个代码块中声明的变量只能在该代码块中可见，并且该变量不可见在特定的代码块之外。

theWidth是在$(window).load的范围内定义的，undefined范围之外的.load。

将所有代码包装在load处理程序中。

$(window).load(function() {
  var theImage = $('ul li img');
  var theWidth = theImage.width();
  //wrap into mother div
  $('ul').wrap('<div class="gallery-slide" />');
  //assign height width and overflow hidden to gallery-slide
  $('.gallery-slide').css({
    width: function() {
      return theWidth;
    },
    height: function() {
      return theImage.height();
    },
    position: 'relative',
    overflow: 'hidden'
  });
  //get total of image sizes and set as width for ul
  var totalWidth = theImage.length * theWidth;
  $('ul').css({
    width: function() {
      return totalWidth;
    }
  });
  $('ul li img').each(function(intIndex) {
    $(this).nextAll('a').bind("click", function() {

      if ($(this).is(".next")) {
        $(this).parent('li').parent('ul').animate({
          "margin-left": (-(intIndex + 1) * theWidth)
        }, 1000);
      } else if ($(this).is(".previous")) {
        $(this).parent('li').parent('ul').animate({
          "margin-left": (-(intIndex - 1) * theWidth)
        }, 1000);
      } else if ($(this).is(".startover")) {
        $(this).parent('li').parent('ul').animate({
          "margin-left": (0)
        }, 1000);
      }
    });
  });
});

Answer 2

那是因为你在一个函数中声明了theWidth，然后尝试在一个函数范围之外的单独函数中使用它。

这就是范围在javascript中的工作方式：

var foo = 'bar';

function f() {
    console.log(foo); // works!
}

这是有效的，因为函数f位于声明foo的范围内...所以你可以使用它。

function e() {
    var foo = 'bar';
}

function f() {
    console.log(foo); // doesn't work!
}

这不起作用。 var foo在e范围内声明，而f不在e范围内，因此foo将无法使用。

function e() {
    var foo = 'bar';

    function f() {
        console.log(foo); // works again!
    }
}

现在它再次起作用，因为f位于e范围内，其中foo已声明。

希望这有助于展示范围如何运作。

当我编写脚本时，它显示ReferenceError：未定义宽度

2 个答案: