javascript - 如何从调整大小函数中访问变量值

Question

我有一个 else..if 语句，它根据 为变量赋值window.width，我想做的是在 a 中使用这个值，window.resize但现在 get'undefined'获取currentSize该值。我应该怎么做才能获得价值？

JS

//Code ran onload
if(windowWidth >= 924) {
    incrementValue = 3;
    currentSize = 'desktop';
}
else if(windowWidth > 615 && windowWidth < 924) {
    incrementValue = 2;
    currentSize = 'tablet';
}
else {
    incrementValue = 1;
    currentSize = 'mobile';
}

$(window).resize(function() {
    windowWidth = $(window).width();

    if(windowWidth >= 924) {
        incrementValue = 3;
        var newSize = 'desktop';
    }
    else if(windowWidth > 615 && windowWidth < 924) {
        incrementValue = 2;
        var newSize = 'tablet';
    }
    else {
        incrementValue = 1;
        var newSize = 'mobile';
    }

    console.log(currentSize); //'undefined'
    if (currentSize !== newSize) {
        var currentSize = newSize;

        incrementTotal = 0;
        slideIndex = 0;

        //Reset slider to start
        $carouselSlides.css( 'left', 0 );
    }
});

Answer 1

不要currentSize像var这样重新定义

if (currentSize !== newSize) {
    var currentSize = newSize;

去除那个var

if (currentSize !== newSize) {
    currentSize = newSize;

这是一个示例，它允许您根据是否存在重现或消除错误var：

• http://jsfiddle.net/94zVg/2/
• http://jsfiddle.net/94zVg/3/

Answer 2

<script>
//global scope
var currentSize = 'desktop', incrementTotal = 0, incrementValue = 0, slideIndex = 0, $carouselSlides = $('#carouselSlides');

function windowResize(windowWidth) {
    var data = [];
    if (windowWidth >= 924) {
        data = ['desktop', 3];
    } else if (windowWidth > 615 && windowWidth < 924) {
        data = ['tablet', 2];
    } else {
        data = ['mobile', 1];
    }
    return data.length ? data : false;
}


$(window).resize(function() {
    var windowWidth = $(this).width();
    var data = windowResize(windowWidth);
    // data[0] = desktop, tablet OR mobile
    // data[1] = 1, 2 OR 3
    incrementValue = data[1];

    if (currentSize !== data[0]) {
        currentSize = data[0];

        incrementTotal = 0;
        slideIndex = 0;

        //Reset slider to start
        $carouselSlides.css('left', 0);
    }    

    // set the style for the current screen size   
});
</script>

Answer 3

您的 newSize 超出范围：

$(window).resize(function() {
   windowWidth = $(window).width();
var newSize =0;
   if(windowWidth >= 924){
      incrementValue = 3;
        newSize = 'desktop';
    } else if(windowWidth > 615 && windowWidth < 924) {
      incrementValue = 2;
      newSize = 'tablet';
    } else {
      incrementValue = 1;
      newSize = 'mobile';
    }

    if (currentSize !== newSize) {
      var currentSize = newSize;

      incrementTotal = 0;
      slideIndex = 0;

      //Reset slider to start
      $carouselSlides.css( 'left', 0 );
    }
  });