Question

我想显示一个项目列表，每个项目都有一个Razor文件中的滑块。

因此，由于知识有限，我设法显示所有项目的滑块，但如何在输入文本框中显示滑块值？即当滑块移动时，应显示该值。

foreach (var item in Items)
{
   @item.Description
   <input type="text" id="value@(item.UniqueID)">
   <div class="slider" id="slider@(item.UniqueID)"></div>
}

<script>
    $(function () {
        $(".slider").slider();
        ????
    });
</script>

Answer 1

首先，请查看API文档：http://api.jqueryui.com/slider/

这显示了一些你可以使用的事件 - “当滑块移动”意味着slide事件。

接下来，您需要链接滑块和输入 - 您可以使用.prev执行此操作，但之后您的html将被修复，或者您可以动态地减去“滑块”并添加“值”，但是，将来风险破裂 - 所以最简单的选择是将相关输入添加到滑块div（有多种方法可以做到这一点，下面是非常简单的）：

<div class='slider' 
     id='slider@(item.UniqueID)' 
     data-inp='value(@item.UniqueID)'>
</div>

然后为幻灯片事件添加处理程序：

$(function() {
    $(".slider").slider();
    $(".slider").on("slide", function(e, ui) {
        $("#" + $(this).data("inp")).val(ui.value);
    });
});

这是一个小提琴，显示它适用于单个输入/滑块：http://jsfiddle.net/76d4t8p3/

在cshtml中显示每个滑块的滑块值

1 个答案: