使用JS顯示HTML範圍滑桿的值

Question

用於顯示HTML範圍滑桿值的JS對於第一個專案（A1）運作良好。然而，我也想將其用於A2項目（實際上有20個項目，所以需要重複使用19次）。是否有一種方法可以為多個迭代編寫程式碼？ constslideValue=document.querySelector("span");constinputSlider=document.querySelector("input&qu

P粉680000555 · Answer

當然有。你會很容易地辨識出你自己的程式碼，它被包裹在一個for迴圈內。

var elems = document.querySelectorAll(".range");
elems.forEach(function(elem) {
  const slideValue = elem.querySelector("span");
  const inputSlider = elem.querySelector("input");
  inputSlider.oninput = (() => {
    let value = inputSlider.value;
    slideValue.textContent = value;
    slideValue.style.left = (value / .1) + "%";
    slideValue.classList.add("show");
  });
  inputSlider.onblur = (() => {
    slideValue.classList.remove("show");
  });
})

A1. Blah Blah Blah.

  0
  
    0
    
    10
  


A2. Blah Blah Blah.

  0
  
    0
    
    10

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學