Question

我有一个范围输入，如下所示：

<input type="range" value="5" name="mySlider" min="1" max="5"/>

默认值为5，它从1到5.我想在侧面添加文本，这取决于滑块当前所处的位置。我不太熟悉Javascript，我的最佳尝试不会产生适当的结果：

<input type="range" onChange="updateSlider();" value="5" id="slide" name="mySlider" min="1" max="5"/>
<span id="sliderChange"></span>

function updateSlider() {
    var value = $("#slide").val();
    if (value == 1) {
        $("#sliderChange").text("One");
    } elseif (value == 2) {
        $("#sliderChange").text("Two");
    } elseif (value == 3) {
        $("#sliderChange").text("Three");
    } elseif (value == 4) {
        $("#sliderChange").text("Four");
    } else {
        $("#sliderChange").text("Five");
    }
}

我做错了什么？

此外，还有一些不相关的东西：我个人从90年代末以来就没有看过范围输入。这些仍然是一件事吗？

Answer 1

您的代码可以重写为（使用mousemove事件实例change事件并使用不引人注目的javascript）

<强> HTML
<input type="range" value="5" id="slide" name="mySlider" min="1" max="5" /> <span id="sliderChange"></span>

Javascript

     $(function () {
        function updateSlider() {
           var value = $("#slide").val();
           if (value == 1) {
              $("#sliderChange").text("One");
           }
           else if (value == 2) {
              $("#sliderChange").text("Two");
           }
           else if (value == 3) {
              $("#sliderChange").text("Three");
           }
           else if (value == 4) {
              $("#sliderChange").text("Four");
           }
           else {
              $("#sliderChange").text("Five");
           }
        }

        $('#slide').mousemove(updateSlider);
     });

您也可以使用switch语句代替if/else

Answer 2

在您的代码中，您使用elseif，在javascript中else if。

您还应该使用mousemove代替change

Here's a Fiddle让您更轻松

Answer 3

错误是写elseif而不是else if，但同样，switch语句可能更合适和可读。

使用新的Web标准和语义HTML，我们不鼓励在*绑定和样式信息（样式属性）上使用内联，JS，HTML和CSS应该是自包含的。看到你已经使用了jQuery，你可以使用jQuery change和input事件来分离JS和HTML。

 $(document).ready(function () {
    $("#slide").on( "change input", function () {
       var value = $(this).val();
       if (value == 1) {
          $("#sliderChange").text("One");
       }
       else if (value == 2) {
          $("#sliderChange").text("Two");
       }
       else if (value == 3) {
          $("#sliderChange").text("Three");
       }
       else if (value == 4) {
          $("#sliderChange").text("Four");
       }
       else {
          $("#sliderChange").text("Five");
       }
    });
 });

Fiddle

您需要input，因为change仅在鼠标重新发布时触发，但IE仅支持change，因此您最好同时使用它们。

根据范围值更改文本

3 个答案: