recherche

Maison  >  Questions et réponses  >  le corps du texte

Afficher la valeur du curseur de plage HTML à l'aide de JS

Le JS pour afficher les valeurs du curseur de plage HTML fonctionne bien pour le premier élément (A1). Cependant, je souhaite également l'utiliser pour des projets A2 (en fait, il y a 20 projets, il doit donc être réutilisé 19 fois). Existe-t-il un moyen de coder plusieurs itérations ? 

 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>

P粉988025835P粉988025835466 Il y a quelques jours628

répondre à tous(1)je répondrai

  • P粉680000555

    P粉6800005552023-09-13 00:49:21

    Bien sûr. Vous reconnaîtrez facilement votre propre code, qui est enveloppé dans une boucle 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>

    répondre
    0
  • Annulerrépondre