JavaScript-обновление нескольких слайдеров innerHTML

Хорошо, вот окончательный ответ. Но вы действительно должны научиться отлаживать свой собственный код. В противном случае вы никогда не сможете закончить что-либо, что вы строите, если все ваши проблемы окажутся здесь.

#1 Прежде всего вам нужно изменить onChange="sliderChange(this.value)" на onChange="sliderChange(this)", и причина этого в том, что когда вы передаете ввод в SliderChange(), тогда все, что вы получаете, это значение, а не весь ввод, который вы Повторное прикосновение или использование. И неразумно передавать единственное значение, когда на самом деле вам может понадобиться гораздо больше. А что вам нужно больше, чем ценность? вам нужно выяснить, какой ввод фактически был изменен, а не только значение измененного ввода. И причина, по которой вам нужно сначала узнать, какой ввод был изменен, заключается в том, чтобы вы могли изменить его снова и сделать к нему обратный вызов. Поскольку значение из вашего ввода ничего не говорит вам о том, какой ввод фактически был изменен, поэтому вы можете снова изменить его.

#2 Теперь, когда у вас наконец есть входные данные, вам нужно выяснить, по какому индексу они находятся, поскольку у них нет определенного идентификатора для их идентификации, опция индекса позволяет вам в основном использовать скрытого или подсчитанного для вас идентификатора. И поэтому вам сначала нужно сначала добавить эту строку кода: var index = document.getElementsByTagName('input');

#3 Наконец, теперь у нас есть измененный ввод и класс 'sliderStatus', который нужно изменить. Затем нам нужно выяснить, какой «sliderStatus» нужно изменить. Но проблема в том, что ни один класс 'sliderStatus' не был затронут или изменен. Поэтому нам нужно каким-то образом связать его с входными данными, которые были изменены, с диапазоном, который необходимо изменить. К счастью, именно здесь мы можем использовать индекс, поскольку они следуют одному и тому же порядку сразу после другого, мы можем считать их одинаково и использовать один и тот же индекс.

for (i = 0; i < index.length; i++){
   if(e == index[i]){
      sliders[i].innerHTML = e.value;
   }
}

function sliderChange(e){
   var index = document.getElementsByTagName('input');
   var sliders = document.getElementsByClassName('sliderStatus');

   for (i = 0; i < index.length; i++){
      if(e == index[i]){
         sliders[i].innerHTML = e.value;
      }
   }
}

Да, это выводится для всех из них, потому что все они имеют один и тот же класс 'SliderStatus', и поэтому вы вызываете скрипт SliderChange(), который в ответ снова получает статус всех классов 'sliderStatus'. Вам нужно сосредоточиться на одном конкретном изменении в одном конкретном вводе. Вы можете легко добиться этого, используя ЭТО в JS. Пример jQuery:

$('sliderStatus').change(function(){
   $(this).val();
});

Это всего лишь быстрый пример того, как извлекать данные по-другому, без использования onClick и т. д. Вы, вероятно, можете понять остальное.

Другой пример: вы можете пройтись по каждому из ваших ползунков и изменить их по ходу дела.

$('sliderStatus').each(function(){
   $(this).val();
});

Этот метод позволяет проверить их все одновременно. Надеюсь, это немного поможет вам в изучении JS.