JS Создать динамическую переменную внутри для цикла

Question

по какой-то причине динамическая переменная внутри цикла for не обновляется в функции, а обновляется в консоли.

Есть ли у sb представление, почему это происходит?Большое спасибо за помощь:)!

$(".numberOfImages").on("mousemove change", function(){
  numberOfImages = this.value;
  changeImageNumber();
});

function changeImageNumber(){
  for(var i = 0; i < numberOfImages; i++){
    console.log(numberOfImages);
    images[i] = "img/image" + i + ".jpg";
  }
}

Answer 1

Да, это вроде работает.Но значение numberOfImages внутри цикла for по-прежнему остается значением по умолчанию = 0. Даже если вы измените параметры ... По крайней мере, в моем случае ... Знаете ли вы, почему?весь мой код выглядит так:

var sliderWidthValue = 1;
var sliderHeightValue = 1;

var distanceLayerWidthValue = 45;
var distanceLayerHeightValue = 45;

var numberOfImages = 10;
var images = [];

$(window).load(function(){
  $("#loadingMessage").hide();
  $("main").show();
});

$(document).ready(function() {

changeImageNumber();

// Change number of images (not working yet)
$(".numberOfImages").on("mousemove change", function(){
  numberOfImages = this.value;
  changeImageNumber();
});

function changeImageNumber(){
  images = [];
  for(var i = 0; i < numberOfImages; i++){
    console.log(numberOfImages);
    images[i] = "img/image" + i + ".jpg";
  }
}

$.each(images, function(i, val) {
    $("<img />")
        .attr("src", val)
        .appendTo("#images")
        .addClass("image"+i);

    $(".image"+i)
        .wrap( "<div class=container"+i+"></div>" );

    containerChange();

    //change container size
    $(".sliderWidth").on("mousemove change", function(){
      sliderWidthValue = this.value;
      containerChange();
    });

    $(".sliderHeight").on("mousemove change", function(){
      sliderHeightValue = this.value;
      containerChange();
    });

    //Change distance between layers
    $(".distanceLayerWidth").on("mousemove change", function(){
      distanceLayerWidthValue = this.value;
      containerChange();
    });
    $(".distanceLayerHeight").on("mousemove change", function(){
      distanceLayerHeightValue = this.value;
      containerChange();
    });

    function containerChange(){
      $(".container"+i)
          .css('width', sliderWidthValue*10+(i*distanceLayerWidthValue) + "px")
          .css('height', sliderHeightValue*10+(i*distanceLayerHeightValue) + "px")
          .css('z-index', i*-1);
    }

});

});

Answer 2

Это сработало, как и ожидалось, но все равно вместо глобальной переменной просто передайте значение функции.

var numberOfImages = 0;
var images = [];
$("#numberOfImages").on("change", function(){
  numberOfImages = this.value;
  changeImageNumber();
  console.log(images)
});

function changeImageNumber(){
  images = [];
  console.log(numberOfImages);
  for(var i = 0; i < numberOfImages; i++){
    images[i] = "img/image" + i + ".jpg";
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="numberOfImages">
<option value=1 >1</option>
<option value=2 >2</option>
<option value=3 >3</option>
<option value=4 >4</option>
</select>