我有一个项目要求最终用户选择摄影师和相关的卷号,每个摄影师都有不同的数据(数据是通过页面加载时的JSON数据库调用引入并放入Javascript数组中 - 用于快速显示价值观)。我创建了一个jsFiddle,其中包含我需要的所有内容,但动态创建的滑块在创建后不会移动。我确信它与最小值和最大值有关,但它“似乎”是正确的。自动完成部分只显示摄影师选择,然后从现有HTML元素动态创建其下方的滑块。我已经删除了很多无用的代码,只是解决问题的基础知识。
[jsFiddle Link] http://jsfiddle.net/sN63W/2/
(Ommiting data array named 'Photographer' - But it is in the jsFiddle Link)
$(function () {
$("#photographer-label").autocomplete({
minLength: 0,
source: Photographer,
focus: function (event, ui) {
$('#photographer-label').val(ui.item.label);
return false;
},
select: function (event, ui) {
$('#photographer').val(ui.item.value);
$('#photographer-label').val(ui.item.label);
var slider_min = ui.item.rollnum_from;
var slider_max = ui.item.rollnum_to;
alert('Selected Rolls: ' + slider_min + ' : ' + slider_max); // For Debugging
$('#rollnum-slider').slider({
min: slider_min, // ui.item.rollnum_from,
max: slider_max, // ui.item.rollnum_to,
change: function (event, ui) {
$('#rollnum').val(ui.value);
}
});
}
});
});
具有讽刺意味的是,如果我在滑块的最小值和最大值内插入硬编码数字,它可以正常工作。但是价值(根据警报框)似乎是正确的。我错过了什么?我知道这可能是一个简单的答案,但我只是有一个大脑痉挛。
P.S。作为一个副作用,我还希望自动完成功能在您将焦点移到滑块时显示“标签”而不是“数据”,但它似乎没有这样做。但这不是什么大问题。
答案 0 :(得分:0)
这是因为您的JSON数据是一个字符串,除去这些值的引号 e.g。
{
"photographer_id": "2",
"label": "Tommy Stay (TS)",
"value": "TS",
"rollnum_from": 1,
"rollnum_to": 10
}
而不是
{
"photographer_id": "2",
"label": "Tommy Stay (TS)",
"value": "TS",
"rollnum_from": "1",
"rollnum_to": "10"
}
这是Jsfiddle,
注意:我将“更改”更改为“幻灯片”并添加了“值”和$( "#rollnum" ).val( $( "#rollnum-slider" ).slider( "value" ) );
,以便在滑块的初始加载时显示一个数字,这对于您的示例来说不是必需的。