Question

这是我JSFiddle的尝试（之前从未使用过）。

我用：

JQuery的
Bootstrap 3
JQuery UI

以下是 index.html 文件中的整个代码：

<!DOCUMENT html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>

<body>
    <div class="container">
        <div class="row">

            <form role="form">
                <div class="form-group">
                    <label for="productTitle">Product</label>
                    <input type="text" class="form-control" id="productTitle" placeholder="Product title"/>
                </div>

                <div class="form-group">
                    <label for="categorySelect"></label>
                    <select class="form-control" id="categorySelect">
                        <option value="" selected>Category</option>
                        <option value="one">One</option>
                        <option value="two">Two</option>
                        <option value="three">Three</option>
                        <option value="four">Four</option>
                        <option value="five">Five</option>
                    </select>
                </div>

                <label for="price">Current Price</label>
                <div class="col-xs-12">
                    <div class="form-group col-xs-6" id="price">
                        <div class="input-group" id="priceFrom">
                            <span class="input-group-addon">$</span>
                            <input type="text" class="form-control" id="priceFromValue"/>
                        </div>
                    </div>


                    <div class="form-group col-xs-6">
                        <div class="input-group" id="priceTo">
                            <span class="input-group-addon">$</span>
                            <input type="text" class="form-control" id="priceToValue"/>
                        </div>
                    </div>
                </div>    

                <div class="form-group col-xs-12" id="priceRangeSlider">
                    <!-- Range Slider from JQuery UI -->
                </div>

                <div class="form-group col-xs-12">
                    <div class="input-group">
                        <input type="text" class="form-control" id="closeDate" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar" id="closeDateIcon"></span>
                        </span>
                    </div>        


                </div>

                <div class="form-group col-xs-9">
                    <label for="numberOfBids">Number of Bids</label>
                </div>
                <div class="form-group col-xs-3">
                    <input type="number" class="form-control" id="numberOfBids"/>
                </div> 

                <div class="form-group">
                    <button type="submit" class="btn btn-default center-block" id="find">Find now</button>
                </div>

            </form>

        </div>
    </div>

    <!-- Latest compiled and minified JavaScripts -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

    <!-- Custom JS for HTML elements -->
    <script>
        $(document).ready( function() {

            $('#priceRangeSlider').slider({
                range: true,
                min: 0,
                max: 5000,
                values: [ 1000, 1500 ],
                slide: function( event, ui ) {
                    $('#priceFromValue').val(value, ui.values[0]);
                    $('#priceToValue').val(value, ui.values[1]);    
                }
            });

            $( "#priceFromValue" ).val( $( "#priceRangeSlider" ).slider( "values", 0) );
            $( "#priceToValue" ).val( $( "#priceRangeSlider" ).slider( "values", 1) );

            $( "closeDate" ).datepicker();    

            $("#closeDateIcon").click(function(event){
                datepicker( "show" );
            });

        });
    </script>    

</body>

</html>

我有两组元素需要额外的JQuery连接：

PriceRange Slider（来自JQuery UI）
DatePicker（来自JQuery UI）我尝试与Bootstrap 3附加组件

这些功能都不起作用。我做错了什么？

Answer 1

我更新了你的小提琴：http://jsfiddle.net/pse5H/8/

我改变了这两行：

$('#priceFromValue').val(value, ui.values[0]);
$('#priceToValue').val(value, ui.values[1]);

到

$('#priceFromValue').val(ui.values[0]);
$('#priceToValue').val(ui.values[1]);

变量＆＃34;值＆＃34;未定义。

错过了片段：日期选择器，你的选择器关闭，应该是：

$( "#closeDate" ).datepicker();

因为＃表示通过ID

选择

要在点击图标时显示日期选择器，需要指定要显示的日期选择器。

datepicker( "show" );// was
$('#closeDate').datepicker("show");//now

Answer 2

对于滑块，在slide回调中，您引用了一个不存在的本地value变量。如果将其更改为

    $('#priceFromValue').val(ui.values[0]);
    $('#priceToValue').val(ui.values[1]);

我认为你会得到你想要的行为。

对于日期选择器，您在选择器中缺少#。您需要将其更改为

$( "#closeDate" ).datepicker();

请帮助识别我的JS / JQuery错误

2 个答案: