Question

我创建了一个jQuery范围滑块，可以在鼠标指针和文本框输入上滑动。我在jsFiddle上创建了它并且工作正常。

问题是当我在MVC应用程序中添加相同的代码时，滑块不会在输入更改事件上滑动。可能是什么原因？任何版本问题？

这段代码不会在输入更改事件上移动滑块：

Jquery的

$("#MinimumPrice, #MaximumPrice").change(function () {
    var valueN = $("#MinimumPrice").val();
    var valuleX = $("#MaximumPrice").val();
    $("#slider-range").slider('values', [ valueN, valuleX ]);
});

HTML

<div id="Price" class="main_filter" name="filterDiv">
<h4>Price</h4>
<div id="slider-range"></div>
<span class="">
    <br />
    <h4>Price Range</h4>
    <br />
    <div style="border: 1px solid #ccc;border-radius: 4px;width:100%;text-align: center;">
        <div class="input-group" style="width: 40%;float: left;">
            <span class="input-group-addon">$</span>
            <input id="MinimumPrice" maxlength="6" name="MinimumPrice" style="border:0;width: 50%" type="text" value="" />
        </div>
        <span style="width: 20%;float: left;">to</span>
        <div class="input-group" style="width: 40%">
            <input id="MaximumPrice" maxlength="6" name="MaximumPrice" style="border:0;width: 50%" type="text" value="" />
        </div>
    </div>
</span>

这是jsFiddle Link。

Answer 1

只需检查MVC项目，就可以通过这项小改动来完成工作。

您已完成在您的示例中这样做不正确：<div id="slider-range"></div>

所以这一行：$("#slider-range").slider('values', [ valueN, valuleX ]);不会影响代码。

应该是这样的：将</div> 滑块范围的结尾更改为结束。

<div id="Price" class="main_filter" name="filterDiv">
    <h4>Price</h4>
    <div id="slider-range"> 
        <br />
        <h4 style="color:black">Price Range</h4>
        <br />
        <div style="border: 1px solid #ccc;border-radius: 4px;width:100%;text-align: center;">
            <div class="input-group" style="width: 40%;float: left;">
                <span class="input-group-addon">$</span>
                <input id="MinimumPrice" maxlength="6" name="MinimumPrice" style="border:0;width: 50%" type="text" value="" />
            </div>
            <span style="width: 20%;float: left;">to</span>
            <div class="input-group" style="width: 40%">
                <input id="MaximumPrice" maxlength="6" name="MaximumPrice" style="border:0;width: 50%" type="text" value="" />
            </div>
        </div>
    </div>
</div>

同样在jsfiddle.

中查看相同内容

滑块的设置值在jsFiddle中工作，而不是在实时站点上

1 个答案: