javascript - 如何使用多个 jQuery 库将 jQuery UI slider 重置为 null

Question

我在重置 jQuery UI slider 时遇到问题。

我收到此错误:MyProject.OrderInfo.Search.js:187 未捕获的 TypeError: $(...).slider 不是函数

我认为我们的问题与拥有多个 jQuery/Javascript 库有关，相互跳过，但我不确定。我的团队一直在尝试的一切都没有奏效。我们只需要将 slider 重置为 NULL 值即可。我们需要使用 NULL，以便我们知道用户没有触摸 slider 。这样，我们就可以将其从 API 调用参数中排除。

如何将 slider 值重置为 NULL？

代码如下:

[OrderInfo.cshtml](脚本区域，顶部):

<link rel="stylesheet" href="~/Content/order.css" />
<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/backgrid-paginator.css" />
<link rel="stylesheet" href="~/Content/backgrid-filter.css" />
<link rel="stylesheet" href="~/Content/backgrid.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="~/Scripts/underscore.js"></script>
<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/jquery-2.2.0.min.js"></script>
<script src="~/Scripts/backbone.js"></script>
<script src="~/Scripts/backbone.paginator.js"></script>
<script src="~/Scripts/backgrid.js"></script>
<script src="~/Scripts/backgrid-paginator.js"></script>
<script src="~/Scripts/backgrid-filter.js"></script>
<script src="~/Scripts/backgrid-select-filter.js"></script>
<script src="~/Scripts/MyProject.OrderInfo.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="~/Scripts/jquery.ui.touch-punch.js"></script>

[OrderInfo.cshtml](正文):

<div class="col-sm-7" id="divslider">
        <div class="row filterHeader">
            <div class="col-md-3 paddingZero">
                <b>Tuition and Fees</b>
            </div>
            <div class="col-md-2 paddingZero">
                <div class="input-group">
                    Min:
                    <span class="input-group-addon" id="MinOrderPrice"> </span>
                </div>
            </div>
            <div class="col-md-5">
                <div id="SliderOrderPrice"></div>
            </div>
            <div class="col-md-2 paddingZero">
                <div class="input-group">
                    Max:
                    <span class="input-group-addon" id="MaxOrderPrice"> </span>
                </div>
            </div>
        </div>

        <!-- MORE HTML BODY CODE HERE, UI/search elements, DIVS, ETC ETC -->

        <div class="row filterHeader">
            <div class="col-md-3 paddingZero">                       
            </div>
            <div class="col-md-2 paddingZero">                        
            </div>
            <div class="col-md-4">                        
            </div>
            <div class="col-md-3 paddingZero">   
                <button class="btn btn-info" id="btnSearch" type="button">Search</button>
                <button class="btn btn-primary" id="btnReset" type="button" style="min-width:71px">Reset</button>                     
            </div>
        </div>
</div>

<!-- END OF [OrderInfo.cshtml] BODY, ** NOTICE THE BOTTOM HAS A JS SCRIPT, EEEK!! ** -->
<script src="~/Scripts/MyProject.OrderInfo.Search.js"></script>

[MyProject.OrderInfo.Search.js](用于搜索订单 REST API 的 .JS 文件):

//Declare slider variables as null and assign only in change function, to distinguish 'dirty' slider from a 'clean' slider
var minorderprice;
var maxorderprice;

//Tution and Fees slider
$("#SliderOrderPrice").slider({
    range: true,
    min: 0,
    max: 50000,
    values: [0, 50000],
    step: 500,
    slide: function (event, ui) {
        $("#MinOrderPrice").html("$" + ui.values[0].toLocaleString());
        if (ui.values[1] == 50000) {
            $("#MaxOrderPrice").html("> $50,000")
        }
        else ($("#MaxOrderPrice").html("$" + ui.values[1].toLocaleString()))
    },
    change: function (event, ui) {
        minorderprice = ui.values[0];
        maxorderprice = ui.values[1];
    }
});
$("#MinOrderPrice").html("$ 0");
$("#MaxOrderPrice").html("> $50,000");
$("#SliderOrderPrice").draggable(); //this is a hack to make the slider responsive on mobile devices (see touch-punch.js)

// Get the values of search checkboxes and sliders, after search button click 
$("#btnSearch").click(function () {

    //do a bunch of nifty things to produce a dynamic URL string, for REST API calls here. This works fine and is left out on purpose.

});

$("#btnReset").click(function () {
    $('input:checkbox').removeAttr('checked');     //clear all checkboxes
    $('#orderTerritory').prop('selectedIndex',0);  //reset State/Territory dropdown to 'All States'
    RenderJSGrid();                                //re-draw grid

   //how to reset slider values here?
   $("#SliderOrderPrice").slider('values', 0, 50000);    //this throws the error like the slider doesnt exist?
   $("#SliderOrderPrice").slider('values', null, null); //would this work?
});

请注意，其中引用了:

<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/jquery-2.2.0.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

我们必须这样做，因为我们的 BackgridJS 实现使用 jQuery 2.2。 slider 想要使用“jquery-ui.js”，我相信它取决于“jquery-1.10.2.js”。

当用户单击“重置”按钮时，会发生错误，并且 JavaScript 的行为就像 slider 未加载一样。但确实如此，我可以看到它在用户界面中工作。难道重置按钮事件需要移到其他地方吗？

有什么想法吗？帮忙？

更新#1:我尝试了@Noctane的建议，但无论我将 Reset 函数放在哪里，我仍然遇到相同的错误。我可以把它内联，我可以把它放在其他脚本中，但不幸的是它永远不会工作。

这是我尝试过的:

<link rel="stylesheet" href="~/Content/order.css" />
<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/backgrid-paginator.css" />
<link rel="stylesheet" href="~/Content/backgrid-filter.css" />
<link rel="stylesheet" href="~/Content/backgrid.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="~/Scripts/underscore.js"></script>
<script src="~/Scripts/backbone.js"></script>
<script src="~/Scripts/backbone.paginator.js"></script>
<script src="~/Scripts/backgrid.js"></script>
<script src="~/Scripts/backgrid-paginator.js"></script>
<script src="~/Scripts/backgrid-filter.js"></script>
<script src="~/Scripts/backgrid-select-filter.js"></script>
<script src="~/Scripts/MyProject.OrderInfo.js"></script>
<script src="~/Scripts/jquery.ui.touch-punch.js"></script>

Answer 1

我已经准备了一个使用jsFiddle的演示，它使用jquery UI，同时利用jquery v2.2.0和jquery版本1.10.2，请看一下，你会看到当你移动 slider 时，它会将其更改的值设置为在控制台中，当您单击“重置”时，它将把 slider 设置为空。

参见DEMO

您可以使用以下代码实现此目的:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<style>
#resetButton {
  margin-top: 15px;
}

</style>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script type="text/javascript">
$( "#sliderTest" ).slider({
  change: function( event, ui ) {
    var s = ui.value;
    console.log(s);
  }
});

$("#resetButton").button({
    icons: {
        primary: "ui-icon-refresh"
      }
});

$("#resetButton").click("click", function(event){
        var s = $("#sliderTest").slider("value", null);
    console.log(s);
});
</script>

<div id="sliderTest"></div>
<button id="resetButton">Reset</button>

您可能需要重新安排应用程序中的包含内容才能使其正常工作。如果你重新排列 fiddle 中的那些，你会看到你得到的错误，如果你然后将它们切换回我排列它们的方式，你会看到它工作。