当我编写脚本时，它显示引用错误:未定义宽度

When i write the script it shows ReferenceError: theWidth is not defined

本文关键字：错误 引用 未定义 显示 脚本      更新时间：2023-09-26

这是我的代码：

$(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未定义。

JavaScript 具有function-level范围（在 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);
      }
    });
  });
});

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

这就是 scope 在 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在声明foo的e范围内。

希望这将有助于展示范围的工作原理。

相关文章：