请帮助识别我的JS / JQuery错误
[英]Please help to identify my JS/JQuery mistakes
问题描述
This is my attempt at JSFiddle (never used it before). 
这是我对JSFiddle的尝试（以前从未使用过）。
I use: 我用：
- JQuery JQuery的
- Bootstrap 3 引导程序3
- JQuery UI jQuery UI
Here's the entire code in a single index.html file: 这是单个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>
I have two groups of elements that require additional JQuery wiring: 我有两组元素，它们需要附加的JQuery连线：
-
PriceRange Slider(fromJQuery UI)PriceRange Slider（来自JQuery UI） -
DatePicker(fromJQuery UI) that I tried to combine withBootstrap 3add-on我尝试与Bootstrap 3附加组件结合使用的DatePicker（来自JQuery UI）
None of this functionality actually works. 实际上，所有功能均无效。 What did I do wrong? 我做错了什么？
2 个解决方案
解决方案1
1 已采纳 2014-03-30 00:43:05
I updated your fiddle: http://jsfiddle.net/pse5H/8/ 我更新了您的小提琴： http : //jsfiddle.net/pse5H/8/
I changed these two lines from: 我将以下两行更改为：
$('#priceFromValue').val(value, ui.values[0]);
$('#priceToValue').val(value, ui.values[1]);
to 至
$('#priceFromValue').val(ui.values[0]);
$('#priceToValue').val(ui.values[1]);
The variable "values" is undefined. 变量“值”未定义。
Missed the piece re: date picker, your selector is off, should be: 错过了re：日期选择器，您的选择器已关闭，应为：
$( "#closeDate" ).datepicker();
as the # represents selection via ID 因为＃代表通过ID选择
To get the datepicker to show on icon click, need to specify which datepicker you wish to show. 要使日期选择器显示在图标单击上，需要指定要显示的日期选择器。
datepicker( "show" );// was
$('#closeDate').datepicker("show");//now
解决方案2
1 2014-03-30 00:47:38
For the slider, in the slide callback, you're referencing a local value variable that doesn't exist. 对于滑块，在slide回调中，您引用的是不存在的局部value变量。 If you change it to 如果您将其更改为
$('#priceFromValue').val(ui.values[0]);
$('#priceToValue').val(ui.values[1]);
I think you'll get your desired behavior. 我认为您会得到想要的行为。
As for the datepicker, you're missing a # in your selector. 至于日期选择器，选择器中缺少# 。 You'll want to change it to 您需要将其更改为
$( "#closeDate" ).datepicker();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.