时间戳

首页 > 解决方案 > JS中的引导范围滑块类名称

javascript - JS中的引导范围滑块类名称

问题描述

我正在使用引导范围滑块，下面的文本以百分比表示。我需要 JS 代码的帮助，目前它正在将 HTML 元素称为 document.getEelementByID

我希望同样的事情发生，但是使用 document.getElementByClassName 因为我的项目中会有很多输入字段。下面是下面的代码

var slider = document.getElementById("myRange");
var output = document.getElementById("percent");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
    output.innerHTML = this.value;
}
<input  type="range" min="0" max="100" value="50"  id="myRange" >
						<span id="percent"></span>

标签： javascripthtmltwitter-bootstrap-3

解决方案

让我向您展示解决该问题的两种方法。

又快又脏

假设滑块和输出在 dom 中总是彼此相邻。您可以使用一些逻辑在标签之前查找输入元素：

Array.from(document.querySelectorAll(".percent")).forEach(output => {
    var slider = output.previousElementSibling;
    slider.addEventListener("input", update);
    update();
    function update() {
        output.innerText = slider.value;
    }
});
<div>
  <input type="range" min="0" max="100" value="50">
  <span class="percent"></span>
</div>
<div>
  <input type="range" min="0" max="100" value="50">
  <span class="percent"></span>
</div>

可重用、基于组件的方法

如果你仔细想想，你基本上是在开发一个新组件，一个“带标签的滑块”。有很多框架可以让你定义自己的组件，比如 Angular、Vue、React、Polymer 等。（这个列表比我刚刚向你展示的要长得多）。

为简单起见，让我们看一下使用 Web 组件的标准方式。

class LabeledSlider extends HTMLElement {
  constructor() {
    super();
    const template = document.getElementById("template-labeled-slider");
    this.appendChild(template.content.cloneNode(true));
    this._attach();
    this._update();
  }
  get inputElement() { return this.querySelector("input"); }
  get textElement() { return this.querySelector("span"); }
  _update() {
    this.textElement.innerText = this.inputElement.value;
  }
  _attach() {
    this.inputElement.addEventListener("input", () => this._update());
  }
}

window.customElements.define('labeled-slider', LabeledSlider);
<div><labeled-slider/></div>
<div><labeled-slider/></div>

<template id="template-labeled-slider">
  <input type="range" min="0" max="100" value="50">
  <span></span>
</template>

推荐阅读