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

【问题标题】：Show slider value for each slider in cshtml在cshtml中显示每个滑块的滑块值
【发布时间】：2015-07-21 06:35:33
【问题描述】：

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

因此，在知识有限的情况下，我设法显示了所有项目的滑块，但是如何在输入文本框中显示滑块值？ IE。随着滑块的移动，值应该会显示出来。

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>

【问题讨论】：

标签： jquery asp.net-mvc jquery-ui razor jquery-ui-slider

【解决方案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/

【讨论】：