2

我在 MVC3 中有一个简单的视图，有三个类型的数字输入。我需要做的是显示一个 JQueryUI 滑块而不是输入。我试过这样，但它只会改变输入表单的形状并且没有滑块。

代码：

<script>
        $(function () {
            $(".nmbr").slider({
                range: "min",
                min: 1,
                max: 100,
                slide: function (event, ui) {
                    $("input[name=" + $(this).attr("id") + "_value]").val(ui.value);
                }
            });
        });
</script>

和html：

<div>
<label for="number">Value:</label>
<input type="text" name="first_value" style="border:0;" />
<input type="number" class="nmbr" id="first" />
<br />
<br />

<label for="number">Value:</label>
<input type="text" name="second_value" style="border:0;" />
<input type="number" class="nmbr" id="second" />
<br />
<br />

<label for="number">Value:</label>
<input type="text" name="third_value" style="border:0;" />
<input type="number" class="nmbr" id="third" />
<br />
<br />

我在哪里偏离了道路？

4

1 回答 1

1

jQuery UI's Sliderdiv不使用input （容易犯错误）。

进行以下更改：

JAVASCRIPT：

$(function () {
    $(".nmbr").slider({
        range: "min",
        min: 1,
        max: 100,
        slide: function (event, ui) {
            $("input[name=" + $(this).attr("id") + "_value]").val(ui.value);
        }
    });
});

HTML：

<label for="number">Value:</label>
<input type="text" name="first_value" style="border:0;" />
<div class="nmbr" id="first"></div>
<br />
<br />

<label for="number">Value:</label>
<input type="text" name="second_value" style="border:0;" />
<div class="nmbr" class="nmbr" id="second"></div>
<br />
<br />

<label for="number">Value:</label>
<input type="text" name="third_value" style="border:0;" />
<div class="nmbr" class="nmbr" id="third"></div>
<br />
<br />

演示：http: //jsfiddle.net/dirtyd77/qN59g/5/

于 2013-04-18T20:14:07.640 回答