從html輸入獲取值

Question

我有一個輸入元素，它是一個范圍滑塊，我想將其轉換為上下限的滑塊。 盡管正在討論中，但尚未針對范圍實現此功能。 如您所見，這是一個受歡迎的問題。

我的問題是，我檢索滑塊結果的方式似乎不再起作用，並且我不明白為什么。 我原來的滑塊是這樣的：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form>
        <label for="slider">
            <input id="slider" type="range" value="0" oninput="sliderAmount.value = slider.value" min="0" max="100" step="1" />
            stuff: <output name="sliderAmount" for="slider">0</output>
        </label>
    </form>
    <div id="stuff"></div>
    <script>
        amt = document.getElementById("slider");
        var amtChange = function () {
            document.getElementById('stuff').innerHTML+='<div>'+amt.value+'</div>';
        };
        amt.onchange = amtChange;
    </script>
</body>
</html>

每次滑動該條時，它都會用新結果更新填充div。 我希望能夠使用jquery滑塊執行相同的操作，但改為使用范圍更新東西div。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Slider - Range slider</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#slider-range").slider({
                range: true,
                min: 0,
                max: 500,
                values: [75, 300],
                slide: function (event, ui) {
                    $("#amount").val(ui.values[0] + " - " + ui.values[1]);
                }
            });
            $("#amount").val($("#slider-range").slider("values", 0) +
                " - " + $("#slider-range").slider("values", 1));
        });
    </script>
</head>
<body>
    <form>
        <label for="amount">Price range:</label>
        <input id="amount" type="text" readonly style="border:0; color:#f6931f; font-weight:bold;">
        <div id="slider-range"></div>
    </form>
    <div id="stuff"></div>
    <script>
        amt = document.getElementById("amount");
        var amtChange = function () {
            document.getElementById('stuff').innerHTML += '<div>' + amt.value + '</div>';
        };
        amt.onchange = amtChange;
    </script>
</body>
</html>

但是，這似乎無法從滑塊輸入中拉出范圍。 如果我進入Chrome的jquery示例控制台，則可以鍵入amt.value ，它將每次返回該值。 我在這里想念什么？

Answer 1

只需在更改其值時觸發change()方法進行input 。

嘗試這個：

演示： FIDDLE

 $(function () {
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: 500,
            values: [75, 300],
            slide: function (event, ui) {
                $("#amount").val(ui.values[0] + " - " + ui.values[1]).change();
            }
        });
        $("#amount").val($("#slider-range").slider("values", 0) +
            " - " + $("#slider-range").slider("values", 1)).change();
    });

Answer 2

您可以使用jQuery UI Range Slider的change事件。 使用它並將更新的更改附加到如下所示的內容。

$(function () {
        var changes = '';
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: 500,
            values: [75, 300],
            slide: function (event, ui) {
                $("#amount").val(ui.values[0] + " - " + ui.values[1]);
            },
            change: function (event, ui) {
                changes += '<div>' + ui.values[0] + " - " + ui.values[1] + '</div>';
                $("#stuff").html(changes);
            }
        });
        $("#amount").val($("#slider-range").slider("values", 0) +
            " - " + $("#slider-range").slider("values", 1));

    });

從html輸入獲取值

問題描述

2 個解決方案

解決方案1
1 已采納 2015-12-11 04:59:19

解決方案2
0 2015-12-11 05:14:47

從html輸入獲取值

問題描述

2 個解決方案

解決方案1 1 已采納 2015-12-11 04:59:19

解決方案2 0 2015-12-11 05:14:47

解決方案1
1 已采納 2015-12-11 04:59:19

解決方案2
0 2015-12-11 05:14:47