Der JS zum Anzeigen der Werte des HTML-Bereichsschiebereglers funktioniert für das erste Element (A1) einwandfrei. Ich möchte es jedoch auch für A2-Projekte verwenden (eigentlich sind es 20 Projekte, daher muss es 19 Mal wiederverwendet werden). Gibt es eine Möglichkeit, für mehrere Iterationen zu programmieren?
const slideValue = document.querySelector("span");
const inputSlider = document.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");
});
<body> <div class="itemstatement">A1. Blah Blah Blah.</div> <div class="range"> <div class="sliderValue"><span>0</span></div> <div class="field"> <div class="value left">0</div> <input type="range" id="A1" name="A1" min="0" max="10" value="0" steps="1"> <div class="value right">10</div> </div></div> <div class="itemstatement">A2. Blah Blah Blah.</div> <div class="range"> <div class="sliderValue"><span>0</span></div> <div class="field"> <div class="value left">0</div> <input type="range" id="A2" name="A2" min="0" max="10" value="0" steps="1"> <div class="value right">10</div> </div></div></div></body>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
当然有。你会很容易地识别出你自己的代码，它被包裹在一个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"); }); })<div class="itemstatement">A1. Blah Blah Blah.</div> <div class="range"> <div class="sliderValue"><span>0</span></div> <div class="field"> <div class="value left">0</div> <input type="range" id="A1" name="A1" min="0" max="10" value="0" steps="1"> <div class="value right">10</div> </div> </div> <div class="itemstatement">A2. Blah Blah Blah.</div> <div class="range"> <div class="sliderValue"><span>0</span></div> <div class="field"> <div class="value left">0</div> <input type="range" id="A2" name="A2" min="0" max="10" value="0" steps="1"> <div class="value right">10</div> </div> </div>