Question

我正在尝试更改使用滑块显示值的方式。我已经制作了一个标签，显示如下值。

课程时间：1天

此处显示的值根据滑块值而变化。

因此，当滑块值位于1时，应显示为“天”，而当滑块值大于1时，应显示为“天”。

我在JavaScript中使用了if / else语句来根据滑块值更改显示的名称。我使用的编码如下。

JS文件：

DB_HOST=localhost

HTML文件：

// method used to get value from slider and display. 

function slider_value() {

    var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");

    output.innerHTML = slider.value;

    slider.oninput = function () {
        output.innerHTML = this.value;
    }
}

// method used to change name according to slider value

function value_name() {

    var count = document.getElementById("myRange");
    var outname = document.getElementById("dname"); 

    if (parseInt(count.value) == 1) {
        outname.innerHTML = "Day";
    }
    else {
        outname.innerHTML = "Days";
    }
}

我已将视图中的函数调用如下：

<label for="duration">

    Course Duration :

    <span id="demo"></span>
    <span id="dname"></span>

</label>

<div class="slidecontainer">

    <input type="range" min="1" max="15" value="1" class="slider" id="myRange">

</div>

编码在调试时不会显示任何错误，但只会显示几天或几天，并且不会根据滑块值而改变。因此，我希望能有一些帮助和想法来纠正此问题。

谢谢。

Answer 1

您需要使用输入元素的oninput和onchange事件，例如： oninput="slider_value(this.value)" onchange="slider_value(this.value)"。

由于IE10不支持oninput，因此两者都可以完全兼容。

这里有个小例子，可以帮助您入门： https://codepen.io/anon/pen/ewBNGj

请注意，从value_name()函数内部调用了设置日期/天字符串（slider_value()）的函数。

Answer 2

不需要复杂的js计算，您可以通过change事件轻松地做到这一点。将事件监听器添加到input，然后在此处添加逻辑，并检出代码段

var el = document.getElementById('myRange');
el.addEventListener('change', function(event){
  var value = event.target.value;
  var _container = document.getElementById('demo');
  value == 1 ? _container.innerText = value+' Day' : _container.innerText = value+' Days'
})

<label for="duration">
                Course Duration :
                <span id="demo"></span>
                <span id="dname"></span>
            </label>

            <div class="slidecontainer">

                <input type="range" min="1" max="15" value="1" class="slider" id="myRange">

            </div>

Answer 3

将滑块文本的格式包装在函数中

  function updateSlider(e) {
    if (parseInt(e.value) == 1) {
      output.innerHTML = parseInt(e.value) + " Day";
    } else {
      output.innerHTML = parseInt(e.value) + " Days";
    }
  }

这样，您可以在开始时调用一次并正确填充文本。要在更改时更新滑块的内容，请添加 input 事件监听器，然后从那里调用此函数。

这是一个例子：

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");

slider.oninput = function(e) {
  updateSlider(e.target);
}

function updateSlider(e) {
  if (parseInt(e.value) == 1) {
    output.innerHTML = parseInt(e.value) + " Day";
  } else {
    output.innerHTML = parseInt(e.value) + " Days";
  }
}

updateSlider(slider);

<label for="duration">
                Course Duration :
                <span id="demo"></span>
                <span id="dname"></span>
            </label>

<div class="slidecontainer">

  <input type="range" min="1" max="15" value="1" class="slider" id="myRange">

</div>

使用If / else语句根据滑块值进行赋值

3 个答案: