滑块的设置值在 jsFiddle 中有效，而不是在现场答案

【问题标题】：Setting value of slider works in jsFiddle, not on live site滑块的设置值在 jsFiddle 中有效，而不是在现场
【发布时间】：2016-08-21 08:58:21
【问题描述】：

我创建了一个 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。

【问题讨论】：

检查控制台是否有错误。由于小提琴工作正常，这里没有任何人可以诊断来帮助您
检查你的页面、布局或BundleConfig中是否包含了所有的JS文件。
控制台没有错误:(
在空项目中检查它是否会起作用，否则可能是jquery 或任何Js 文件中的一些冲突。
也可以尝试将相关.Js 放入您的页面。

标签： jquery jquery-ui events model-view-controller jquery-ui-slider

【解决方案1】：

刚刚签入了 MVC 项目，它通过做这个小改动来工作。

你在你的例子中是这样的，这是不正确的：<div id="slider-range"></div>

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

应该是这样的：把</div>slider-range的结尾改成end。

<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.

【讨论】：

所以可能有一些Js 问题，因为我在 MVC 应用程序中使用相同的并且它正在工作。