Question

我在HTML5中创建了一个表单滑块。此时它根据滑块的步进设置显示数值。我想在滑块的特定步骤中显示文本句子旁边的值。

我现在的代码：

<input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" />
<span id="range">0</span>
<script type="text/javascript">
function showValue(newValue)
{
    document.getElementById("range").innerHTML=newValue;
}
</script>

Answer 1

您可以使用这样的开关/案例：

<head>
    <script type="text/javascript">

        function showValue(newValue)
        {
            var sentence = "";

            switch (newValue) {
                case "10":
                    sentence = ": Your sentence for step 10";
                    break;
                case "25":
                    sentence = ": Another sentence for step 25";
                    break;
            }
            document.getElementById("range").innerHTML = newValue + sentence;
        }
    </script>
</head>
<body>
    <input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" />
    <span id="range">0</span>
</body>

Answer 2

只需添加if或switch声明：

function showValue(newValue)
{
    // If our passed in value is equal to 50, set the HTML
    if (newValue == 50)
        document.getElementById("range").innerHTML=newValue;
    // Otherwise clear the HTML
    else
        document.getElementById("range").innerHTML='';
}

function showValue(newValue)
{
    switch (newValue) {
        case 50:
            document.getElementById("range").innerHTML=newValue;
            break;
        default:
            document.getElementById("range").innerHTML='';
            break;
    }
}

Answer 3

我不赞同这里的答案。在大多数情况下，将文本内容放在JS中是不好的做法。其次，如果您要显示的文本是范围值的重要描述部分，则应使用数据列表使其可访问。

这意味着您的HTML可能如下所示：

<div class="range-output">
    <label for="range">label</label>
    <input id="range" name="range" list="range-list" type="range" value="0" step="10" max="50" />
    <datalist id="range-list">
        <select>
            <option value="0" label="low"></option>
            <option value="20" label="middle"></option>
            <option value="50" label="high"></option>
        </select>
    </datalist>
</div>

你的JS（我在这里使用jQuery）可能看起来像这样：

$('div.range-output').each(function () {
    var range = $('input[type="range"]', this);
    var output = $('<span class="output" />').appendTo(this);
    var updateOutput = function () {
        var val = range.prop('value');
        var valLabel = $(range.prop('list')).find('option[value="' + val + '"]').prop('label');
        output.html(valLabel || val);
    };
    range.on('input', updateOutput).each(updateOutput);
});

回答第二个问题：输入[type =“range”]是一个普通的表格控件。您只需将其命名并将其放在表单属性中即可。而不是使用按钮样式的锚点使用按钮[type =“submit”]，你就完成了。如果您不能将按钮和/或输入[type =“range”]放在表单内。您可以使用表单属性将它们与表单相关联。

这是一个简单的小提琴，展示了上面的代码：

在表单Slider上设置步骤的值

3 个答案: