Диапазон ввода мин., Макс. Значение, целочисленный массив, сортировка при получении этой ошибки. Невозможно прочитать свойство «заменить» неопределенного - PullRequest
Новая
       88

Диапазон ввода мин., Макс. Значение, целочисленный массив, сортировка при получении этой ошибки. Невозможно прочитать свойство «заменить» неопределенного

0 голосов
/ 21 марта 2020

Я работаю над ползунком диапазона типов ввода здесь, я пытаюсь масштабировать изображение при перемещении слайда, здесь все работает нормально, когда я использую min = '0' и max = '100' 

slider.oninput = function() {
  first.innerHTML = this.value * 200;
}
var imageScale = new Array();
imageScale = [{
  'transform': 'scale(0.7)'
}, {
  'transform': 'scale(0.9)'
}, {
  'transform': 'scale(1.1)'
}, {
  'transform': 'scale(1.3)'
}, {
  'transform': 'scale(1.8)'
}, {
  'transform': 'scale(0.25)'
}];

$(document).on('input change', '#slider', function() { //listen to slider changes
  var v = $(this).val(); //getting slider val

  $("#img").css(imageScale[v]);
});
img {
  width: 60px;
  height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<input type="range" id="slider" min="0" max="100" value="0" class="slider" />
<span id="first"></span>units
<img src="http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg" id='img' />

Теперь я изменяю min, max на min="3412" max="341214" большое целое число, тогда масштабирование изображения не работает. Может быть, это связано с индексацией массива. Кто-нибудь может подсказать мне, что я делаю не так, и направить меня в правильном направлении. Любая помощь будет признательна

1 Ответ

1 голос
/ 21 марта 2020

Звучит так, будто все, что вам нужно сделать, - это сначала вызвать Math.max для значения во входе, чтобы вы могли извлечь из массива или индекс в ползунке или * 1005. * максимальный индекс в массиве. Это гарантирует, что вы получите объект в вашей переменной v, и вы можете установить css.

Например, для imageScale, имеющего 6 элементов, если пользователь перемещается в значение 3, установите CSS для объекта с индексом 3. Если пользователь перемещается к значению 20, или 100, или 10000, это выходит за пределы диапазона массива, поэтому вы можете установить CSS для объекта с самым высоким индексом в массиве. - вот это [5]: 

slider.oninput = function() {
  first.innerHTML = this.value * 200;
}
var imageScale = [{
  'transform': 'scale(0.7)'
}, {
  'transform': 'scale(0.9)'
}, {
  'transform': 'scale(1.1)'
}, {
  'transform': 'scale(1.3)'
}, {
  'transform': 'scale(1.8)'
}, {
  'transform': 'scale(0.25)'
}];

$(document).on('input change', '#slider', function() { //listen to slider changes
  var v = Math.min($(this).val(), imageScale.length - 1); //getting slider val
  $("#img").css(imageScale[v]);
});
img {
  width: 60px;
  height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<input type="range" id="slider" min="0" max="100" value="0" class="slider" />
<span id="first"></span>units
<img src="http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg" id='img' />

Обратите внимание, что текущий код приводит к тому, что значения за пределами поля приводят к уменьшению изображения - это потому, что последний элемент в imageScale массив 'transform': 'scale(0.25)', намного меньше, чем все остальные элементы в массиве. (Если вы хотите, чтобы последний элемент был больше , чем другие элементы в массиве, возможно, сделайте что-то вроде 'transform': 'scale(2.5)')

...